jquery - 在 Jquery 中使用不使用 html 的变量动态创建表

Question

请不要：它不是简单的动态表。与其他问题没有相似之处。我想在 Single Main 表的基础上使用 Jquery 创建一个多表。但它不能在动态表中添加行。

请注意，我正在使用 var

创建完整表时，将 var 添加到 html。

var _MaintHtml="";
var counter=0;
var _MainTable="";
var _MainRow="";

$(document).ready(function(){
GenerateTable();
});

function GenerateTable(){
$(".myTable").find('.maintr').each(function(){
	AddTable();
  AddRow();
  $("#DivMainTable").append(_MainTable);
}); 
}

function AddTable(){
_MainTable=`
<table>
<thead><tr><th>h1</th><th>h2</th><th>h3</th></tr><thead>
<tbody class='tbody1'>
</tbody>
</table>
`;
}

function AddRow(){

$(_MainTable).find('.tbody1').append(`<tr><td>3</td><td>4</td><td>5</td></tr>`);

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<table class="myTable">
<tr class="maintr" ><td>1</td><td>check1</td><td>Class1</td></tr>
<tr class="maintr" ><td>2</td><td>check2</td><td>Class2</td></tr>
</table>
</div>

<div id="DivMainTable">
</div>

jsfiddle 代码在这里

标签： jquery

Answer 1

使用 document.createElement() 创建表及其字段。当前您将表添加为字符串值。这就是为什么 $(_MainTable).find('.tbody1').append( <tr><td>3</td><td>4</td><td>5</td></tr>); 不工作

var _MaintHtml="";
var counter=0;
var _MainTable;
var _MainRow="";

$(document).ready(function(){
GenerateTable();
});

function GenerateTable(){
$(".myTable").find('.maintr').each(function(){
	AddTable();  
	AddRow();
  $("#DivMainTable").append(_MainTable);
  
}); 
}

function AddTable(){

 _MainTable  = document.createElement("table");
var tblhead = document.createElement("thead");
var tblbody  = document.createElement("tbody");
tblbody.className = "tbody1";
_MainTable.appendChild(tblbody);

 for (var i = 0; i < 1; i++) {
    // creates a table row
    var row = document.createElement("tr");

    for (var j = 1; j < 4; j++) {
      // Create a <td> element and a text node, make the text
      // node the contents of the <td>, and put the <td> at
      // the end of the table row
      var cell = document.createElement("th");
      var cellText = document.createTextNode("h"+j);
      cell.appendChild(cellText);
      row.appendChild(cell);
    }

    // add the row to the end of the table body
    tblhead.appendChild(row);
  }
_MainTable.appendChild(tblhead);

}

function AddRow(){

$(_MainTable).find('.tbody1').append(`<tr><td>3</td><td>4</td><td>5</td></tr>`);

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<table class="myTable">
<tr class="maintr" ><td>1</td><td>check1</td><td>Class1</td></tr>
<tr class="maintr" ><td>2</td><td>check2</td><td>Class2</td></tr>
</table>
</div>
<div id="DivMainTable">
</div>