Question

我已将事件点击添加到我的动态表中，但它不起作用。

$("#gridVille").append('<table id="idTableVille" class="table table-striped table-hover">');
        $("#idTableVille").append('<thead>');
        $("#idTableVille thead").append('<tr><th>Code commune</th><th>Libellé</th></tr>');
        $("#idTableVille").append('</thead>');

        $("#idTableVille").append('<tbody>');
        for (i = 0; i < liste.length; i++) {
            $("#idTableVille tbody").append('<tr id="' +liste[i].id+ '">');
            $('#idTableVille tbody').append('<td scope="row" class="idCommune">' + liste[i].id+ '</td>');
            $('#idTableVille tbody').append('<td class="libelleCommune">' + liste[i].libelle+ '</td>');
            $("#idTableVille tbody").append('</tr>');
        }
        $("#idTableVille").append('</tbody>');
        $("#gridVille").append('</table>');

$('#idTableVille tr').click(function () {
 var id = $(this).find('td:eq(0)').text();
 var libelle = $(this).find('td:eq(1)').text();
 alert(id + ' ' + libelle);
});

在填充表格后添加此代码。

场景是：

我打开模态（bootstrap模态）
我填写表格
我点击表格的任何一行获取列的值

Answer 1

您要将<tr>元素附加到<tbody>，然后将每个<td>附加到<tbody>而不是新生成的行，因此不是常规表结构：

<table>
<tbody>
    <tr id="something">
        <td>Something</td>
        <td>Hello!</td>
    </tr>
</tbody>
</table>

你得到了这个：

<table>
<tbody>
    <tr id="something"></tr>
    <td>Something</td>
    <td>Hello!</td>
</tbody>
</table>

如果更改for循环内的代码，它应该得到修复：

for (i = 0; i < liste.length; i++) {
      $("#idTableVille tbody").append('<tr id="' +liste[i].id+ '">');
      $('#idTableVille tbody tr#' + liste[i].id).append('<td scope="row" class="idCommune">' + liste[i].id+ '</td>');
      $('#idTableVille tbody tr#' + liste[i].id).append('<td class="libelleCommune">' + liste[i].libelle+ '</td>');
}

如您所见，我将元素附加到新创建的行，使用id来选择它。

你可以看到它在这里工作：

https://jsbin.com/yojajisuca/edit?html,js,output

Jquery将click事件关联到modal中的动态表行

1 个答案: