Question

我有一个由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() {}

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

Answer 1

这样的东西？我注意到一件事，你需要确保将选择器（。或＃或类或ID）添加到处理程序。

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

})

然后你可以添加值或id并像这样得到它们

var my_id_value = row.attr('id')

Answer 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，而是使用类。

Answer 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;

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

3 个答案: