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

Question

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.

Is this table need to be rendered from some data source? You can use each function for doing the same task. — Ritesh Kashyap
– Ritesh Kashyap, Commented Jul 22, 2016 at 8:02
Jquery For Loop?? Its javascript for loop.. Jquery is just a wrapper on top of javascript — Akshay Khandelwal
– Akshay Khandelwal, Commented Jul 22, 2016 at 8:03
you have data for table? or you have a pattern for generated table? — Pajar Fathurrahman
– Pajar Fathurrahman, Commented Jul 22, 2016 at 8:05

Jayesh Chitroda · Accepted Answer · 2016-07-22 08:05:25Z

1

Using for loop you can achieve it

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>

answered Jul 22, 2016 at 8:05

Jayesh Chitroda

5,03915 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Pajar Fathurrahman · Accepted Answer · 2016-07-22 08:08:45Z

0

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>

answered Jul 22, 2016 at 8:08

Pajar Fathurrahman

1,0211 gold badge10 silver badges19 bronze badges

Comments

kapantzak · Accepted Answer · 2016-07-22 08:06:15Z

0

You can create a row for each item in a loop and append it to a table:

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

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

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

answered Jul 22, 2016 at 8:06

kapantzak

11.8k5 gold badges42 silver badges63 bronze badges

Comments

Nordine · Accepted Answer · 2016-07-22 08:13:41Z

0

You can do this with a boucle for like this :

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>

edited Jul 22, 2016 at 8:13

answered Jul 22, 2016 at 8:07

Nordine

8868 silver badges29 bronze badges

Comments

Shrikant D · Accepted Answer · 2016-07-22 08:18:21Z

0

For loop is a good option with a method call. This can be achieved as follows:

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

answered Jul 22, 2016 at 8:18

Shrikant D

8371 gold badge8 silver badges14 bronze badges

Collectives™ on Stack Overflow

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

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related