-2

我正在尝试使用 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 表格样式。

4

4 回答 4

0

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

$('#tblAddedCallsign tbody').append(row);
于 2019-08-02T12:03:25.837 回答
0

然后你需要<tbody>输入html

有两种方式

  1. 添加<tbody>您附加的动态 html
  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>

于 2019-08-02T11:55:27.907 回答
0

添加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>

于 2019-08-02T12:07:09.157 回答
0

只需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>

于 2019-08-02T11:58:34.767 回答