javascript - 如何使用 for 循环和 .append() 方法在 jQuery 中构造表

标签 javascript jquery html

我需要使用.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/

相关文章:

javascript - RegExp 匹配不带引号的单引号文本 - JavaScript

javascript - 如何在无需重新启动的 Firefox 扩展中交换数组文件?是不是更新数组元素而不是整个扩展?

jQuery Slider 如何将 handle 锁定到位?

javascript - 与可拖动和可放置的交换不起作用

javascript - html,javascript,如何知道复选框何时更改状态

html - 使用 Chrome/IE 进行奇怪的顶部填充并显示 :inline on ul list

html - 元素的 z-index 但是不同的定位?

javascript - 图像相互叠加的动画

javascript排序函数排序错误

javascript - 通过 Ajax 从对话框发送 php 生成的表单数据