动态填充的表在参数上添加附加行

Question

for (var i = 0; i < 4; i++) {
  var tr = $('<tr/>');
  tr.append("<td id=''>" + i + "</td>");
  tr.append("<td id=''>" + i + "</td>");
  tr.append("<td id=''>" + i + "</td>");
  tr.append("<td id=''>" + i + "</td>");
  tr.append("<td id=''>" + i + "</td>");
  $("#searchresult").append(tr)
}
var tablerow = $("#searchresult tbody").find('tr').length;
if (tablerow < 10) {
  console.log(tablerow);
  for (var i = 0; tablerow > 10; i++) {
    console.log(i);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table width="100%" border="1" id="searchresult">
  <thead>
    <tr align="center">
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
    </tr>
  </thead>
</table>

我想在这个动态创建的表上添加额外的行，这样我总共可以有10行。如果动态添加的行小于10，我会陷入困境。

任何想法都表示赞赏！

UPDATE

I add data to the table dynamically. In the instance that the table row in tbody is less than 10 i want to add more row (blank) to make it total of 10 rows

Answer 1

检查可用的rows长度后，从for loop中已存在的行数中重复table。

for (var i = 0; i < 4; i++) {
  var tr = $('<tr/>');
  tr.append("<td id=''>" + i + "</td>");
  tr.append("<td id=''>" + i + "</td>");
  tr.append("<td id=''>" + i + "</td>");
  tr.append("<td id=''>" + i + "</td>");
  tr.append("<td id=''>" + i + "</td>");
  $("#searchresult").append(tr)
}
var tablerow = $("#searchresult tbody").find('tr').length;
if (tablerow < 10) {
  //start iterating from number of rows created i.e. tablerow and here it is 4
  for (var i = tablerow;i<10 ; i++) {
    var tr = $('<tr/>');
    //if you want blank rows here remove 'i'
    tr.append("<td id=''>" + i + "</td>");
    tr.append("<td id=''>" + i + "</td>");
    tr.append("<td id=''>" + i + "</td>");
    tr.append("<td id=''>" + i + "</td>");
    tr.append("<td id=''>" + i + "</td>");
    $("#searchresult").append(tr)
    //again repeat the same step.. You can also think of keeping this in a function
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table width="100%" border="1" id="searchresult">
  <thead>
    <tr align="center">
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
    </tr>
  </thead>
  
</table>