Javascript 如何将html表转换为引导表？

我已经在页面上的动态数据的帮助下创建了一个HTML表，但是我想将该表显示为bootstrap，只需最少的更改。实际上，我想使用bootstrap将这个表放在div下，还想为这个HTML代码提供bootstrap表类，但我不知道如何将它添加到bootstrap表中

代码如下：

	var table= $("<table>");
table.append($("<tr><th>col1</th><th>col2</th><th>col3</th><th>col4</th><th>col5</th></tr>"));
var row=$('<tr class="parent_row" >' + '<td>'+ "1" + '</td>' + '<td>' + "2" + '</td>' + '<td>' + "3" + '</td>' + '<td>' +  "" + '</td>' + '<td>' + "" + '</td></tr>');

table.append(row);
//child row
var row=$('<tr style="display: none">'	+ '<td>' + "" + '</td>' + '<td>' + "" + '</td>' + '<td>' + "" + '</td>' + '<td>' + "4" + '</td>' + '<td>' + "5" + '</td></tr>');
var row1=$('<tr style="display: none">'	+ '<td>' + "" + '</td>' + '<td>' + "" + '</td>' + '<td>' + "" + '</td>' + '<td>' + "4" + '</td>' + '<td>' + "5" + '</td></tr>');

table.append(row);
table.append(row1);

$("#table").html(table);
$("#table").show();
$('.parent_row').click(function() {
  $(this).nextUntil(".parent_row").toggle();
})

检查以下内容：

var table= $("#table");
table.append($("<tr><th>col1</th><th>col2</th><th>col3</th><th>col4</th><th>col5</th></tr>"));
var row=$('<tr class="parent_row" >' + '<td>'+ "1" + '</td>' + '<td>' + "2" + '</td>' + '<td>' + "3" + '</td>' + '<td>' +  "" + '</td>' + '<td>' + "" + '</td></tr>');

table.append(row);
//child row
var row=$('<tr style="display: none">'  + '<td>' + "" + '</td>' + '<td>' + "" + '</td>' + '<td>' + "" + '</td>' + '<td>' + "4" + '</td>' + '<td>' + "5" + '</td></tr>');
var row1=$('<tr style="display: none">' + '<td>' + "" + '</td>' + '<td>' + "" + '</td>' + '<td>' + "" + '</td>' + '<td>' + "4" + '</td>' + '<td>' + "5" + '</td></tr>');

table.append(row);
table.append(row1);

$("#table").show();
$("#table").addClass("table table-bordered");
$('.parent_row').click(function() {
  $(this).nextUntil(".parent_row").toggle();
})

var table=$（“#table”）；
表.追加（$（“col1col2col3col4col5”）；
变量行=$（''++''1''++''2''++''3''++''++''++''++''++''++''；
表.追加（行）；
//儿童排
变量行=$（''++''++''++''++''++''++''++''++''++''++''4''++''++''++''5''++''）；
var row1=$（''++''++''++''++''++''++''++''++''++''++''4''++''++''++''5'++''）；
表.追加（行）；
表.追加（第1行）；
$（“#表”）.show（）；
$（“#表”）.addClass（“带边框的表”）；
$（'.parent_行'）。单击（函数（）{
$（this）.nextUntil（“.parent_row”）.toggle（）；
})
检查以下内容：

var table= $("#table");
table.append($("<tr><th>col1</th><th>col2</th><th>col3</th><th>col4</th><th>col5</th></tr>"));
var row=$('<tr class="parent_row" >' + '<td>'+ "1" + '</td>' + '<td>' + "2" + '</td>' + '<td>' + "3" + '</td>' + '<td>' +  "" + '</td>' + '<td>' + "" + '</td></tr>');

table.append(row);
//child row
var row=$('<tr style="display: none">'  + '<td>' + "" + '</td>' + '<td>' + "" + '</td>' + '<td>' + "" + '</td>' + '<td>' + "4" + '</td>' + '<td>' + "5" + '</td></tr>');
var row1=$('<tr style="display: none">' + '<td>' + "" + '</td>' + '<td>' + "" + '</td>' + '<td>' + "" + '</td>' + '<td>' + "4" + '</td>' + '<td>' + "5" + '</td></tr>');

table.append(row);
table.append(row1);

$("#table").show();
$("#table").addClass("table table-bordered");
$('.parent_row').click(function() {
  $(this).nextUntil(".parent_row").toggle();
})

var table=$（“#table”）；
表.追加（$（“col1col2col3col4col5”）；
变量行=$（''++''1''++''2''++''3''++''++''++''++''++''++''；
表.追加（行）；
//儿童排
变量行=$（''++''++''++''++''++''++''++''++''++''++''4''++''++''++''5''++''）；
var row1=$（''++''++''++''++''++''++''++''++''++''++''4''++''++''++''5'++''）；
表.追加（行）；
表.追加（第1行）；
$（“#表”）.show（）；
$（“#表”）.addClass（“带边框的表”）；
$（'.parent_行'）。单击（函数（）{
$（this）.nextUntil（“.parent_row”）.toggle（）；
})

从cdn插入boostrap css
将引导类添加到html中
删除你的css

var表=$（“”）；
表.追加（$（“col1col2col3col4col5”）；
变量行=$（''++''1''++''2''++''3''++''++''++''++''++''++''；
表.追加（行）；
//儿童排
变量行=$（''++''++''++''++''++''++''++''++''++''++''4''++''++''++''5''++''）；
var row1=$（''++''++''++''++''++''++''++''++''++''++''4''++''++''++''5'++''）；
表.追加（行）；
表.追加（第1行）；
$（“#表格”）.html（表格）；
$（“#表”）.show（）；
$（'.parent_行'）。单击（函数（）{
$（this）.nextUntil（“.parent_row”）.toggle（）；
})


从cdn插入boostrap css
将引导类添加到html中
删除你的css

var表=$（“”）；
表.追加（$（“col1col2col3col4col5”）；
变量行=$（''++''1''++''2''++''3''++''++''++''++''++''++''；
表.追加（行）；
//儿童排
变量行=$（''++''++''++''++''++''++''++''++''++''++''4''++''++''++''5''++''）；
var row1=$（''++''++''++''++''++''++''++''++''++''++''4''++''++''++''5'++''）；
表.追加（行）；
表.追加（第1行）；
$（“#表格”）.html（表格）；
$（“#表”）.show（）；
$（'.parent_行'）。单击（函数（）{
$（this）.nextUntil（“.parent_row”）.toggle（）；
})

var table=$（“#table”）；
表.追加（$（“col1col2col3col4col5”）；
变量行=$（''++''1''++''2''++''3''++''++''++''++''++''++''；
表.追加（行）；
//儿童排
变量行=$（''++''++''++''++''++''++''++''++''++''++''4''++''++''++''5''++''）；
var row1=$（''++''++''++''++''++''++''++''++''++''++''4''++''++''++''5'++''）；
表.追加（行）；
表.追加（第1行）；
$（“#表”）.addClass（“带边框的表”）；
$（“#表”）.show（）；
$（'.parent_行'）。单击（函数（）{
$（this）.nextUntil（“.parent_row”）.toggle（）；
})
var table=$（“#table”）；
表.追加（$（“col1col2col3col4col5”）；
变量行=$（''++''1''++''2''++''3''++''++''++''++''++''++''；
表.追加（行）；
//儿童排
变量行=$（''++''++''++''++''++''++''++''++''++''++''4''++''++''++''5''++''）；
var row1=$（''++''++''++''++''++''++''++''++''++''++''4''++''++''++''5'++''）；
表.追加（行）；
表.追加（第1行）；
$（“#表”）.addClass（“带边框的表”）；
$（“#表”）.show（）；
$（'.parent_行'）。单击（函数（）{
$（this）.nextUntil（“.parent_row”）.toggle（）；
})
您必须将引导中的相关类添加到表中。签入我的代码，我应该在其中添加相关类，使其成为引导表，因为我不想更改代码。您必须将引导表中的相关类添加到表中。检查我的代码，我应该在哪里添加相关类以使其成为引导表，因为我不想更改代码。我应该在html内容中更改什么，因为我没有得到结果？@Rahul请检查此解决方案。您添加了一些引导链接以使此代码正常工作？您在html内容中使用了什么代码？这是一样的？@Rahul您只需要在代码中添加引导cdn或文件链接。我应该在html内容中更改什么，因为我没有得到结果？@Rahul请检查此解决方案。您添加了一些引导链接以使此代码正常工作？您在html内容中使用了什么代码？相同吗？@Rahul您只需要在代码中添加引导cdn或文件链接。@Rahul请检查this@Rahul请检查一下