jQuery 3.3.1 - 行未使用 append() 添加到表的 tbody

Question

我正在尝试使用 JQuery 3.3.1 和 Bootstrap 4 在单击事件时向 html 上的表动态添加一行。

HTML：

<table id='tblAddedCallsign' class='table table-striped'>
</table>

JAVASCRIPT：

var row =   '<tr>' +
                '<td class="text-right">' + callsign_id + '</td>' +
                '<td class="text-right">' + callsign_name + '</td>' +
                '<td class="text-right"><input type="button" class="btn btn-primary delete" value="Delete" data-id="' + callsign_id + '"></td>' +
                    '</tr>';

$('#tblAddedCallsign').append(row);

当点击事件发生时，html呈现如下：

<table id="tblAddedCallsign" class="table table-striped">
    <tr>
        <td class="text-right">360</td>
        <td class="text-right">BIRDDOG 386</td>
        <td class="text-right"><input type="button" class="btn btn-primary delete" value="Delete" data-id="360"></td>
    </tr>
    <tr>
        <td class="text-right">607</td>
        <td class="text-right">BIRDDOG 376</td>
        <td class="text-right"><input type="button" class="btn btn-primary delete" value="Delete" data-id="607"></td>
    </tr>
</table>

我实际上期待它是：

<table id="tblAddedCallsign" class="table table-striped">
  <tbody>
    <tr>
        <td class="text-right">360</td>
        <td class="text-right">BIRDDOG 386</td>
        <td class="text-right"><input type="button" class="btn btn-primary delete" value="Delete" data-id="360"></td>
    </tr>
    <tr>
        <td class="text-right">607</td>
        <td class="text-right">BIRDDOG 376</td>
        <td class="text-right"><input type="button" class="btn btn-primary delete" value="Delete" data-id="607"></td>
    </tr>
  </tbody>
</table>

所以问题是tbody在点击事件时没有自动添加到表格元素中，因此没有应用Bootstrap表格样式。

Answer 1

那你需要把<tbody>放到html里

有两种方法

1. 在您附加的动态 html 中添加 <tbody>
2. 将<tbody> 提供给您的表格并在该正文中追加行

var callsign_id = 1;
var callsign_name = 'name';
var row =   ' <tbody><tr>' +
                '<td class="text-right">' + callsign_id + '</td>' +
                '<td class="text-right">' + callsign_name + '</td>' +
                '<td class="text-right"><input type="button" class="btn btn-primary delete" value="Delete" data-id="' + callsign_id + '"></td>' +
                    '</tr> </tbody>';

$('#tblAddedCallsign').append(row);



// Another way
var row =   ' <tr>' +
                '<td class="text-right">' + callsign_id + '</td>' +
                '<td class="text-right">' + callsign_name + '</td>' +
                '<td class="text-right"><input type="button" class="btn btn-primary delete" value="Delete" data-id="' + callsign_id + '"></td>' +
                    '</tr> ';
$('#addRow').append(row);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id='tblAddedCallsign' class='table table-striped'>
</table>

// Another way
<table id='tblAddedCallsign1' class='table table-striped'>
<tbody id="addRow">
</tbody>
</table>

Answer 2

我认为你找到了 tbody，然后附加你的行元素。

$('#tblAddedCallsign tbody').append(row);

Answer 3

将tbody 添加到您的 HTML 中，该行将插入其中。

附加到

• $('#tblAddedCallsign')
• $('#tblAddedCallsign tbody')
• $('#tblAddedCallsign > tbody')

应该都可以正常工作（第 2 和第 3 之间的区别在于后者只选择表元素的直接tbody 子元素）。

callsign_id = 1;
callsign_name = "name";
var row =   '<tr>' +
                '<td class="text-right">' + callsign_id + '</td>' +
                '<td class="text-right">' + callsign_name + '</td>' +
                '<td class="text-right"><input type="button" class="btn btn-primary delete" value="Delete" data-id="' + callsign_id + '"></td>' +
                    '</tr>';

$('#tblAddedCallsign').append(row);
$('#tblAddedCallsign tbody').append(row);
$('#tblAddedCallsign > tbody').append(row);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id='tblAddedCallsign' class='table table-striped'>
    <tbody></tbody>
</table>

Answer 4

只需在表格中指定tbody：

<table id='tblAddedCallsign' class='table table-striped'>
  <tbody></tbody>
</table>

我也更喜欢Template Literals 来构建更简洁的htmlString。

演示：

var callsign_id = '01X';
var callsign_name = 'John';
var row = `<tr>
          <td class="text-right">${callsign_id}</td>
          <td class="text-right">${callsign_name}</td>
          <td class="text-right"><input type="button" class="btn btn-primary delete" value="Delete" data-id=${ callsign_id}></td>
          </tr>`;

$('#tblAddedCallsign').append(row);

tbody{
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id='tblAddedCallsign' class='table table-striped'>
  <tbody></tbody>
</table>