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

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>

我认为这是您所期望的。