如何动态地将新行添加到表格中，每行中的表格标题和列在哪里？

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>