时间戳

首页 > 解决方案 > 获取在 jquery.click() 事件中单击的行的详细信息

jquery - 获取在 jquery.click() 事件中单击的行的详细信息

问题描述

我有一个动态表，具有可变的行数。我正在尝试根据单击的特定行从后端获取相关信息。

表的 html（这是来自 django 模板 - 基本上在返回的 db 中为每个对象添加一个）：

<table class="table table-bordered" id="dataTable">
    <thead>
        <tr>
            <th>pk</th>
            <th>ent_1</th>
            <th>ent_2</th>
            <th>ent_3</th>
        </tr>
    </thead>
    <tbody>
    {% for o in object_list %}

            <tr>
                <td><a class="test" href="{% url 'myapp:ajaxview' %}">{{ o.pk }}</a></td>
                <td><a class="test" href="{% url 'myapp:ajaxview' %}">{{ o.ent_1 }}</a></td>
                <td><a class="test" href="{% url 'myapp:ajaxview' %}">{{ o.ent_2 }}</a></td>
                <td><a class="test" href="{% url 'myapp:ajaxview' %}">{{ o.ent_3 }}</a></td>
            </tr>

    {% endfor %}
    </tbody>
</table>

<div id="details">
   <!-- details info from the back is appended to the DOM here. -->
</div>

捕获事件并将 html 附加到 div#details 的 jquery 代码：

$(function() {
    $('.test').click(function (event) {
        event.preventDefault();
        console.log("table row clicked")  // sanity check
        update_details();
    });

    function update_details() {
        console.log("update details is called")
        $.ajax({
            // must include the app endpoint at the beginning, others it appends to current url, e.. ajaxlist/get_ajax_details/
            url: "/myapp/get_ajax_details/",
            type: "GET",
            data: {},

            // success
            success: function (rendered_template) {
                $('#details').empty();
                $('#details').prepend(rendered_template)
                console.log(rendered_template);
                console.log("success")
            },

            // error
            error: function (xhr, errmsg, err) {
                $('#results').html("<div class='alert-box alert radius' data-alert>Oops! We have encountered an error: " + errmsg +
                    " <a href='#' class='close'>&times;</a></div>"); // add the error to the dom
                console.log(xhr.status + ": " + xhr.responseText); // provide a bit more info about the error to the console
            }

        });
    };

});

我已经将它踩到了萤火虫中，但是我不明白如何才能获得单击了哪一行的完整详细信息。最终，我需要单击的那一行的第一列（“pk”列）的内容，以便我可以将其发送到支持的，以便它返回带有相关信息的 render_template，我可以将它们附加到我的div#详细信息。

其他详情：

我正在为选择器使用类。我知道我可以改为生成一个整数 ID（例如，为每行编号）。但这似乎很浪费，我确信我的目的不需要它。这是一个快速原型，最终我将研究 jquery 选择器，这样我只需要向表本身添加一个类（然后在需要监听的表中监听任何 table>tbody>tr>a 的点击）。

谢谢

标签： jqueryajax

解决方案

稍微修改您的代码并将点击事件附加到“td”而不是“a”标签以轻松获取它的索引。

$(document).ready(function(){
  $('#dataTable td').click(function (event) {
     var col = $(this).index(),
     firstColVal = $(this).parent().children('td:first-child').text(),
     row = $(this).parent().index();
     
     console.log("Row index: " + row + ", Col index: " + col + ",  Col Value: " + firstColVal);

     //update_details(); <-- pass required value as parameter
  });
});
table {
    border-collapse: collapse;
}
th, td { border: 1px solid #000; padding: 10px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table class="table table-bordered" id="dataTable">
    <thead>
        <tr>
            <th>pk</th>
            <th>ent_1</th>
            <th>ent_2</th>
            <th>ent_3</th>
        </tr>
    </thead>
    <tbody>
      <tr>
          <td><a class="test" href="#">PK Row 0</a></td>
          <td><a class="test" href="#">Ent_1</a></td>
          <td><a class="test" href="#">Ent_2</a></td>
          <td><a class="test" href="#">Ent_3</a></td>
      </tr>
      <tr>
          <td><a class="test" href="#">PK Row 1</a></td>
          <td><a class="test" href="#">Ent_1</a></td>
          <td><a class="test" href="#">Ent_2</a></td>
          <td><a class="test" href="#">Ent_3</a></td>
      </tr>
      <tr>
          <td><a class="test" href="#">PK Row 2</a></td>
          <td><a class="test" href="#">Ent_1</a></td>
          <td><a class="test" href="#">Ent_2</a></td>
          <td><a class="test" href="#">Ent_3</a></td>
      </tr>
    </tbody>
</table>

推荐阅读