How to add new row into table dynamically,where in each row having table heading and column?

Question

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tbl" class="tbl1">
  <tr>
    <th>
      mobileno
    </th>
    <td class='mo' id="mo_0">
    </td>
  </tr>

</table>

actually If my static array limited values so I want to append those more than limited values into dynamic row of same html table. limited values of array insert into html table and more than 15 values of array should be inserted dynamically into row of that existing html table

How about this: http://stackoverflow.com/questions/171027/add-table-row-in-jquery ? — barbsan, Feb 15 '17 at 09:27
@NinaScholz I added Jsfiddle link please refer this link what i want in result — ziel, Feb 15 '17 at 09:44

score 0 · Accepted Answer · answered Feb 15 '17 at 09:45

var intmo = [];
var strmo;
var count;
$(document).ready(function() {
  strmo = [111, 201, 345, 434, 532, 677, 790, 890, 989, 118, 107, 136, 125, 153, 142, 125, 153, 142, 434, 532, 677, 790, 890, 989, 118, 107, 136, 125, 153, 142, 125, 153, 142];
  mo();
  populatevalues();
});

function mo() {
  for (i = 0; i < strmo.length; i++)
    intmo.push(parseInt(strmo[i]));
}

function populatevalues() {
  /*15 values of array insert into html table and more than 15 values of array should be inserted dynamically into row of that existing html table*/
  /*so after 15 values of array create new row where row having heading and column and insert values of array into that td colum of html table*/
  for (var i = 0; i < strmo.length/3; i++) {
    count = 0;
    if (i > 5){
        $("#tbl").append("<tr><th>mobileno</th><td class='mo' id=\"mo_" +i+"\"></td></tr>");
    }
    for (var j = i * 3; j < i * 3 + 3; j++) {
      $("#mo_" + i).append(intmo[j]);
      count++;
      if (count <= 2) {
        $("#mo_" + i).append(";");
      }

    }
  }
  /*append to row in existing table idea put here */
  //$('<td></td>').text("text1").appendTo(row); 

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tbl" class="tbl1">
  <tr>
    <th>
      mobileno
    </th>
    <td class='mo' id="mo_0">
    </td>
  </tr>
  <tr>
    <th>
      mobileno
    </th>
    <td class='mo' id="mo_1">
    </td>
  </tr>
  <tr>
    <th>
      mobileno
    </th>
    <td class='mo' id="mo_2">
    </td>
  </tr>
  <tr>
    <th>
      mobileno
    </th>
    <td class='mo' id="mo_3">
    </td>
  </tr>
  <tr>
    <th>
      mobileno
    </th>
    <td class='mo' id="mo_4">
    </td>
  </tr>
  <tr>
    <th>
      mobileno
    </th>
    <td class='mo' id="mo_5">
    </td>
  </tr>
</table>

I think this is what you expected.

score 0 · Answer 2 · answered Feb 15 '17 at 10:08

If i understand you correctly you want to add a sub table into each row, I hope this helps

var intmo = [];
 var strmo;
 var count;
 $(document).ready(function() {
   strmo = "111, 201, 345, 434, 532, 677, 790, 890, 989, 118, 107, 136, 125, 153, 142";
   mo();
   populatevalues();
 });

 function mo() {
   strArr = strmo.split(',');
   for (i = 0; i < strArr.length; i++)
     intmo.push(parseInt(strArr[i]));
 }

 function populatevalues() {
   /*15 values of array insert into html table and more than 15 values of array should be inserted dynamically into row of that existing html table*/
   /*so after 15 values of array create new row where row having heading and column and insert values of array into that td colum of html table*/

   for (var i = 0; i < 5; i++) {
     count = 0;
     for (var j = i * 3; j < i * 3 + 3; j++) {
       $("#mo_" + i).append("<tr><th>mobileno</th><td class='mo' id=\"mo_" +i+"\">"+intmo[j]+"</td></tr>");
       

     }
   }
   /*append to row in existing table idea put here */
   //$('<td></td>').text("text1").appendTo(row); 

 }

.tbl1, td, th {
    border: 1px solid black;
}
.tbl1
{
      margin:15px 0px;
      width:100%;
}

.tbl1 th
{
   padding-left:15px;
}
.tbl1 td
{
    width: 70%;
   padding:15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tbl" class="tbl1">
  <tr>
    <th>
      mobileno
    </th>
    <td class='mo' id="mo_0">
    1;2;3
    </td>
  </tr>
  <tr>
    <th>
      mobileno
    </th>
    <td class='mo' id="mo_1">
    4;5;6
    </td>
  </tr>
  <tr>
    <th>
      mobileno
    </th>
    <td class='mo' id="mo_2">
    7;8;9
    </td>
  </tr>
  <tr>
    <th>
      mobileno
    </th>
    <td class='mo' id="mo_3">
    10;11;12
    </td>
  </tr>
  <tr>
    <th>
      mobileno
    </th>
    <td class='mo' id="mo_4">
    13;14;15
    </td>
  </tr>
  <tr>
    <th>
      mobileno
    </th>
    <td class='mo' id="mo_5">/*want dynamic row i made just to understand that i want data in this way*/
    16;17;18
    </td>
  </tr>
  <tr>
   <th>
      mobileno
    </th>
       <td class='mo' id="mo_5">/*want dynamic row i made just to understand that i want data in this way*/
    19;
    </td>
  </tr>
</table>

How to add new row into table dynamically,where in each row having table heading and column?

2 Answers2