Question

我需要使用.append（）方法创建一个表，如下所示：

$('#myTable').append("<tr><td><input type='radio' class='with-gap' id='primary0' name='radioBtn' value='0'/><label for='primary0'></label></td><td><input type='checkbox' name='checkgroup' id='checkedBox0' class='filled-in' value='0'><label for='checkedBox0'></label></td></tr>");
$('#myTable').append("<tr><td><input type='radio' class='with-gap' id='primary1' name='radioBtn' value='1'/><label for='primary1'></label></td><td><input type='checkbox' name='checkgroup' id='checkedBox1' class='filled-in' value='1'><label for='checkedBox1'></label></td></tr>");
$('#myTable').append("<tr><td><input type='radio' class='with-gap' id='primary2' name='radioBtn' value='2'/><label for='primary2'></label></td><td><input type='checkbox' name='checkgroup' id='checkedBox2' class='filled-in' value='2'><label for='checkedBox2'></label></td></tr>");
$('#myTable').append("<tr><td><input type='radio' class='with-gap' id='primary3' name='radioBtn' value='3'/><label for='primary3'></label></td><td><input type='checkbox' name='checkgroup' id='checkedBox3' class='filled-in' value='3'><label for='checkedBox3'></label></td></tr>");
$('#myTable').append("<tr><td><input type='radio' class='with-gap' id='primary4' name='radioBtn' value='4'/><label for='primary4'></label></td><td><input type='checkbox' name='checkgroup' id='checkedBox4' class='filled-in' value='4'><label for='checkedBox4'></label></td></tr>");
$('#myTable').append("<tr><td><input type='radio' class='with-gap' id='primary5' name='radioBtn' value='5'/><label for='primary5'></label></td><td><input type='checkbox' name='checkgroup' id='checkedBox5' class='filled-in' value='5'><label for='checkedBox5'></label></td></tr>");
$('#myTable').append("<tr><td><input type='radio' class='with-gap' id='primary6' name='radioBtn' value='6'/><label for='primary6'></label></td><td><input type='checkbox' name='checkgroup' id='checkedBox6' class='filled-in' value='6'><label for='checkedBox6'></label></td>></tr>");
$('#myTable').append("<tr><td><input type='radio' class='with-gap' id='primary7' name='radioBtn' value='7'/><label for='primary7'></label></td><td><input type='checkbox' name='checkgroup' id='checkedBox7' class='filled-in' value='7'><label for='checkedBox7'></label></td></tr>");
$('#myTable').append("<tr><td><input type='radio' class='with-gap' id='primary8' name='radioBtn' value='8'/><label for='primary8'></label></td><td><input type='checkbox' name='checkgroup' id='checkedBox8' class='filled-in' value='8'><label for='checkedBox8'></label></td></tr>");
$('#myTable').append("<tr><td><input type='radio' class='with-gap' id='primary9' name='radioBtn' value='9'/><label for='primary9'></label></td><td><input type='checkbox' name='checkgroup' id='checkedBox9' class='filled-in' value='9'><label for='checkedBox9'></label></td></tr>");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="striped" id="myTable" >
  <thead>
    <tr>
      <th>Primary</th>
      <th>Tag / Untag</th>
    </tr>
  </thead>
</table>

现在我的问题是如何以更简单的方式附加我的表，例如在jQuery中使用for循环？顺便说一句，还有一个要求是通过.append（）方法构造表。

Answer 1

使用for循环可以实现它

＆＃13;

for(i=0;i<=9;i++){
  $('#myTable').append("<tr><td><input type='radio' class='with-gap' id='primary"+i+"' name='radioBtn' value='"+i+"'/><label for='primary"+i+"'></label></td><td><input type='checkbox' name='checkgroup' id='checkedBox0' class='filled-in' value='"+i+"'><label for='checkedBox"+i+"'></label></td></tr>");
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class="striped" id="myTable" >
  <thead>
    <tr>
      <th>Primary</th>
      <th>Tag / Untag</th>
    </tr>
  </thead>
</table>

＆＃13;

Answer 2

您可以为循环中的每个项目创建一个行并将其附加到表格中：

＆＃13;

var target = $('#test');
var rows = '';
for(var i=0;i<10;i++) {
  rows += '<tr><td>' + i + '</td><td>cell_' + i + '</td></tr>';
}
var tbl = $('<table><tbody>' + rows + '</tbody></table');
target.append(tbl);

＆＃13;

#test td {
  border: 1px solid #d8d8d8;
  padding:5px 10px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div id="test"></div>

＆＃13;

Answer 3

你可以这样做，如下：

function appendTableRow(nbRow)
{
        var i = 0;
        for(i = 0; i < nbRow; i++)
        {
            $('#myTable').append("<tr><td><input type='radio' class='with-gap' id='primary" + i + "' name='radioBtn' value='"+ i +"'/><label for='primary" + i + "'></label></td><td><input type='checkbox' name='checkgroup' id='checkedBox" + i + "' class='filled-in' value='"+i+"'><label for='checkedBox"+i+"></label></td></tr>");
        }
}

appendTableRow(10);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="striped">
  <thead>
    <tr>
      <th>Primary</th>
      <th>Tag / Untag</th>
    </tr>
  </thead>
  <tbody id="myTable">
  </tbody>
</table>

Answer 4

我尝试让您的代码更简单

避免多次使用追加，只需要一次。

试试这个

＆＃13;

var html = "";
for(i=0;i<10;i++){
  html += "<tr><td><input type='radio' class='with-gap' id='primary"+i+"' name='radioBtn' value='"+i+"'/><label for='primary"+i+"'></label></td><td><input type='checkbox' name='checkgroup' id='checkedBox"+i+"' class='filled-in' value='"+i+"'><label for='checkedBox"+i+"'></label></td></tr>";
}

$("#myTable").append(html);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="striped" id="myTable" >
  <thead>
    <tr>
      <th>Primary</th>
      <th>Tag / Untag</th>
    </tr>
  </thead>
</table>

＆＃13;

Answer 5

使用方法调用For循环是一个不错的选择。这可以通过以下方式实现：

<script type="text/javascript">
 function createTable(numrows){
   for(i=0;i<=numrows;i++){
      $('#myTable').append("<tr><td><input type='radio' class='with-gap' id='primary"+i+"' name='radioBtn' value='"+i+"'/><label for='primary"+i+"'></label></td><td><input type='checkbox' name='checkgroup' id='checkedBox0' class='filled-in' value='"+i+"'><label for='checkedBox"+i+"'></label></td></tr>");
   }
 }
</script>

 <table class="striped" id="myTable" >
  <thead>
  <tr>
    <th>Primary</th>
    <th>Tag / Untag</th>
  </tr>
  </thead>
 </table>
 <script type="text/javascript>createTable(9);</script>

如何使用for循环和.append（）方法

5 个答案: