我需要使用.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() 方法构建表。
最佳答案
使用for循环就可以实现
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>");
}
<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>
关于javascript - 如何使用 for 循环和 .append() 方法在 jQuery 中构造表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38521221/