使用 jQuery 使用 onClick 事件处理程序访问 html 表中的数据答案

【问题标题】：Accessing data in an html table with jQuery using a onClick event handler使用 jQuery 使用 onClick 事件处理程序访问 html 表中的数据
【发布时间】：2016-10-14 14:19:27
【问题描述】：

我有一个由 foreach 循环填充的表以从数据库中获取数据：

foreach ($retrieve_data as $retrieved_data) {
    $content .= "
    <tr id=\"id_$retrieved_data->id\">
        <td> $retrieved_data->id </td>
        <td> $retrieved_data->posname </td>
        <td> $retrieved_data->month </td>
        <td> $retrieved_data->year </td>
        <td> $retrieved_data->availableinv </td>
        <td> $retrieved_data->maxinv </td>
        <td> <button type=\"button\" id=\"editImpressionsBtn\" value=\"Edit\">Edit </button>
    </tr>";
}

我想编写一个 jQuery 函数，当点击编辑按钮时从表中获取数据，例如 id、availableinv 和 maxinv。

jQuery(document).on('click', 'editImpressionsBtn', function() {}

如何在此函数中为每个列中的数据分配一个变量，仅用于单击编辑按钮的行？

【问题讨论】：

标签： php jquery html-table parent-child edit

【解决方案1】：

这样的？我注意到一件事，您需要确保将选择器（. 或 # 用于类或 ID）添加到处理程序。

$('.table_selector tbody').on('click', '.editImpressionsBtn', function(){ 
    row = $(this).closest('tr');

})

然后您可以添加值或 id 并像这样获取它们

var my_id_value = row.attr('id')

【讨论】：

【解决方案2】：

瞄准TR，然后是不同的TD

$('#editImpressionsBtn').on('click', function() {
   var tr  = $(this).closest('tr');
   var tds = tr.find('td');

   var id  = tds.eq(0).text();
   var avb = tds.eq(4).text();
});

如果您在服务器端生成多个表，请确保不要对所有表使用相同的 ID，而是使用一个类。

【讨论】：

【解决方案3】：

这个答案分为三个部分。两个是您问题的核心，一个是编码选项/改进：

第一：
由于您的表格是在循环中构建的，因此我认为您有多行。请注意，您不能有多个具有相同 ID 的按钮。这不仅在语义上不正确，还会导致 jQuery 出现问题。因此，将按钮的 id 更改为一个类：

<button type="button" class="editImpressionsBtn" value="Edit">Edit </button>

第二：
现在，在您的 jQuery 中，您可以相当轻松地访问该行：

jQuery(document).on('click', 'button.editImpressionsBtn', function() {
    var row = $(this).closest('tr');
    var id = row.find('td:eq(0)').text();
    var posname = row.find('td:eq(1)').text();
    // ... etc
});

第三：
像您正在做的那样在引号内转义引号是编码的痛苦，并且更难以维护和阅读。在这种情况下，我建议使用HEREDOC。

例子：

$content .= <<<HTML
    <tr id="id_$retrieved_data->id">
        <td> $retrieved_data->id </td>
        <td> $retrieved_data->posname </td>
        <td> $retrieved_data->month </td>
        <td> $retrieved_data->year </td>
        <td> $retrieved_data->availableinv </td>
        <td> $retrieved_data->maxinv </td>
        <td> <button type="button" class="editImpressionsBtn" value="Edit">Edit </button>
    </tr>

HTML;

【讨论】：