Javascript jQuery 3.3.1-不使用append（）将行添加到表的tbody中_Javascript_Jquery_Bootstrap 4_Jquery 3

Javascript jQuery 3.3.1-不使用append（）将行添加到表的tbody中

javascript jquery bootstrap-4

Javascript jQuery 3.3.1-不使用append（）将行添加到表的tbody中,javascript,jquery,bootstrap-4,jquery-3,Javascript,Jquery,Bootstrap 4,Jquery 3,我正在尝试使用jQuery3.3.1和Bootstrap4在单击事件时动态地将一行添加到html上的表中 HTML: <table id='tblAddedCallsign' class='table table-striped'> </table> var row = '<tr>' + '<td class="text-right">' + callsign_id + '</td>' +

我正在尝试使用jQuery3.3.1和Bootstrap4在单击事件时动态地将一行添加到html上的表中

HTML:

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

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

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

JAVASCRIPT:

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

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

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

var行=“”+
''+callsign_id+''电话号码+
''+callsign_name+''+
'' +
'';
$（'#tblAddedCallsign'）。追加（行）；

当单击事件发生时，html呈现为：

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

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

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


360
伯多格386
607
伯多格376

我真的希望是：

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

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

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


360
伯多格386
607
伯多格376

因此，问题是，单击事件时，

tbody

未自动添加到table元素中，因此未应用引导表样式。

然后需要将

放入html中

有两条路

使用附加的动态html添加

将

添加到表中，并在该正文中追加行

var callsign\u id=1；
var callsign_name='name'；
变量行=“”+
''+callsign_id+''电话号码+
''+callsign_name+''+
'' +
' ';
$（'#tblAddedCallsign'）。追加（行）；
//另一种方式
变量行=“”+
''+callsign_id+''电话号码+
''+callsign_name+''+
'' +
' ';
$（'#addRow'）。追加（行）

//另一种方式
只需在表中指定t正文
：
<table id='tblAddedCallsign' class='table table-striped'>
  <tbody></tbody>
</table>

t车身{
颜色：红色；
}
我认为您找到了tbody，然后添加了row元素
$('#tblAddedCallsign tbody').append(row);

将tbody
添加到HTML中，该行将插入其中
附加于

$（'tblAddedCallsign'）
$（'tblAddedCallsign tbody'）
$（'tblAddedCallsign>tbody'）

所有这些都应该正常工作（第二个和第三个的区别在于后者只选择表元素的直接tbody
子元素）

callsign\u id=1；
callsign_name=“name”；
变量行=“”+
''+callsign_id+''电话号码+
''+callsign_name+''+
'' +
'';
$（'#tblAddedCallsign'）。追加（行）；
$（'#tblAddedCallsign tbody'）。追加（行）；
$（'#tblAddedCallsign>tbody'）。追加（行）

首先将
添加到字符串中，然后在每个的末尾将其关闭