TTT123456789 TTT123456789 - 4 months ago 15
HTML Question

how to construct table in jQuery using for loop and .append() method

I need to create a table using .append() method, as shown in below:



$('#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>





Now my question is how to append my table in a more simply way, such as using for loop in jQuery?
By the way, one more requirement is to construct the table by .append() method.

Answer

i try to make your code more simple

avoid using append multiple time, you just need one time.

try this

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);
<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>