如何将新行动态添加到表中，每行中都有表标题和列？

Question

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tbl" class="tbl1">
  <tr>
    <th>
      mobileno
    </th>
    <td class='mo' id="mo_0">
    </td>
  </tr>

</table>

实际上，如果我的静态数组限制了值，那么我想将超出限制值的那些值附加到同一html表的动态行中。 将有限的数组值插入到html表中，并且应将超过15个值的数组动态插入到该现有html表的行中

Answer 1

 var intmo = []; var strmo; var count; $(document).ready(function() { strmo = [111, 201, 345, 434, 532, 677, 790, 890, 989, 118, 107, 136, 125, 153, 142, 125, 153, 142, 434, 532, 677, 790, 890, 989, 118, 107, 136, 125, 153, 142, 125, 153, 142]; mo(); populatevalues(); }); function mo() { for (i = 0; i < strmo.length; i++) intmo.push(parseInt(strmo[i])); } function populatevalues() { /*15 values of array insert into html table and more than 15 values of array should be inserted dynamically into row of that existing html table*/ /*so after 15 values of array create new row where row having heading and column and insert values of array into that td colum of html table*/ for (var i = 0; i < strmo.length/3; i++) { count = 0; if (i > 5){ $("#tbl").append("<tr><th>mobileno</th><td class='mo' id=\\"mo_" +i+"\\"></td></tr>"); } for (var j = i * 3; j < i * 3 + 3; j++) { $("#mo_" + i).append(intmo[j]); count++; if (count <= 2) { $("#mo_" + i).append(";"); } } } /*append to row in existing table idea put here */ //$('<td></td>').text("text1").appendTo(row); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id="tbl" class="tbl1"> <tr> <th> mobileno </th> <td class='mo' id="mo_0"> </td> </tr> <tr> <th> mobileno </th> <td class='mo' id="mo_1"> </td> </tr> <tr> <th> mobileno </th> <td class='mo' id="mo_2"> </td> </tr> <tr> <th> mobileno </th> <td class='mo' id="mo_3"> </td> </tr> <tr> <th> mobileno </th> <td class='mo' id="mo_4"> </td> </tr> <tr> <th> mobileno </th> <td class='mo' id="mo_5"> </td> </tr> </table> 

我认为这就是您的期望。

Answer 2

如果我正确理解了您想在每行中添加一个子表，希望对您有所帮助

 var intmo = []; var strmo; var count; $(document).ready(function() { strmo = "111, 201, 345, 434, 532, 677, 790, 890, 989, 118, 107, 136, 125, 153, 142"; mo(); populatevalues(); }); function mo() { strArr = strmo.split(','); for (i = 0; i < strArr.length; i++) intmo.push(parseInt(strArr[i])); } function populatevalues() { /*15 values of array insert into html table and more than 15 values of array should be inserted dynamically into row of that existing html table*/ /*so after 15 values of array create new row where row having heading and column and insert values of array into that td colum of html table*/ for (var i = 0; i < 5; i++) { count = 0; for (var j = i * 3; j < i * 3 + 3; j++) { $("#mo_" + i).append("<tr><th>mobileno</th><td class='mo' id=\\"mo_" +i+"\\">"+intmo[j]+"</td></tr>"); } } /*append to row in existing table idea put here */ //$('<td></td>').text("text1").appendTo(row); } 

 .tbl1, td, th { border: 1px solid black; } .tbl1 { margin:15px 0px; width:100%; } .tbl1 th { padding-left:15px; } .tbl1 td { width: 70%; padding:15px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id="tbl" class="tbl1"> <tr> <th> mobileno </th> <td class='mo' id="mo_0"> 1;2;3 </td> </tr> <tr> <th> mobileno </th> <td class='mo' id="mo_1"> 4;5;6 </td> </tr> <tr> <th> mobileno </th> <td class='mo' id="mo_2"> 7;8;9 </td> </tr> <tr> <th> mobileno </th> <td class='mo' id="mo_3"> 10;11;12 </td> </tr> <tr> <th> mobileno </th> <td class='mo' id="mo_4"> 13;14;15 </td> </tr> <tr> <th> mobileno </th> <td class='mo' id="mo_5">/*want dynamic row i made just to understand that i want data in this way*/ 16;17;18 </td> </tr> <tr> <th> mobileno </th> <td class='mo' id="mo_5">/*want dynamic row i made just to understand that i want data in this way*/ 19; </td> </tr> </table>