Create & dynamically while in loop jquery

Question

I have this jquery code that loops through all rows on my table1.

$('#table_1').find('tr').each(function (i, el) {
   var $tds = $(this).find('td');
   var test1 = $tds.eq(0).text();
   var test2 = $tds.eq(1).text();
   var test3 = $tds.eq(2).text();
   console.log (test1 + test2 + test3);
});

And this is the table where I will pass the values of rows from table1. What I need to do is to dynamically add rows and pass the value within this table until the loop ends. How can I do it using jquery?

<table
  style="width: 540px; display: none; float: left; border-collapse: collapse;"
  border="1"
>
  <tbody>
    <tr>
      <td>&nbsp;FROM:</td>
      <td>Blah Blah Blah Blah</td>
    </tr>
    <tr>
      <td>&nbsp;ADDRESS:</td>
      <td>Blah Blah Blah Blah</td>
    </tr>
    <tr>
      <td>&nbsp;CONTACT NUMBER:</td>
      <td>Blah Blah Blah Blah</td>
    </tr>
    <tr style="border: none; height: 20px;">
      <td style="border: none; text-align: center; height: 20px;" colspan="2">
        <strong></strong>
      </td>
    </tr>
    <tr>
      <td>&nbsp;TO:</td>
      <td>Blah Blah Blah Blah</td>
    </tr>
    <tr>
      <td>&nbsp;ADDRESS:</td>
      <td>Blah Blah Blah Blah</td>
    </tr>
    <tr>
      <td>&nbsp;BARANGAY:</td>
      <td>Blah Blah Blah Blah</td>
    </tr>
    <tr>
      <td>&nbsp;CITY &amp; PROVINCE:</td>
      <td>Blah Blah Blah Blah</td>
    </tr>
    <tr>
      <td>&nbsp;CONTACT NUMBER:</td>
      <td>Blah Blah Blah Blah</td>
    </tr>
    <tr>
      <td>&nbsp;PRODUCT &amp; PRICE</td>
      <td>Blah Blah Blah Blah</td>
    </tr>
    <tr style="border: none; height: 18px;">
      <td style="border: none; text-align: center; height: 18px;" colspan="2">
        &nbsp;
      </td>
    </tr>
  </tbody>
</table>

I hope someone could help me.

Possible duplicate of [jQuery document.createElement equivalent?](https://stackoverflow.com/questions/268490/jquery-document-createelement-equivalent) — jtate, Mar 14 '19 at 02:21
To sum up you want to clone the values of this first table in a second one ? — Laura, Mar 14 '19 at 02:58

score 0 · Answer 1 · answered Mar 14 '19 at 04:36

$("#AddRow").on("click", function() {
  $("#tbl").append("<tr><td>Blah</td><td>Bll</td></tr>")
  for (let i = 0; i < 3; i++) {
    $("#tbl").append("<tr><td>BlahLoop</td><td>Bll Loop</td></tr>")
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<button id=AddRow>Click To Add
</button>
<table id="tbl" style="width: 540px; ; float: left; border-collapse: collapse;" border="1">
  <tbody>
    <tr>
      <td>&nbsp;FROM:</td>
      <td>Blah Blah Blah Blah</td>
    </tr>
    <tr>
      <td>&nbsp;ADDRESS:</td>
      <td>Blah Blah Blah Blah</td>
    </tr>
    <tr>
      <td>&nbsp;CONTACT NUMBER:</td>
      <td>Blah Blah Blah Blah</td>
    </tr>
    <tr style="border: none; height: 20px;">
      <td style="border: none; text-align: center; height: 20px;" colspan="2"><strong></strong></td>
    </tr>
    <tr>
      <td>&nbsp;TO:</td>
      <td>Blah Blah Blah Blah</td>
    </tr>
    <tr>
      <td>&nbsp;ADDRESS:</td>
      <td>Blah Blah Blah Blah</td>
    </tr>
    <tr>
      <td>&nbsp;BARANGAY:</td>
      <td>Blah Blah Blah Blah</td>
    </tr>
    <tr>
      <td>&nbsp;CITY &amp; PROVINCE:</td>
      <td>Blah Blah Blah Blah</td>
    </tr>
    <tr>
      <td>&nbsp;CONTACT NUMBER:</td>
      <td>Blah Blah Blah Blah</td>
    </tr>
    <tr>
      <td>&nbsp;PRODUCT &amp; PRICE</td>
      <td>Blah Blah Blah Blah</td>
    </tr>
    <tr style="border: none; height: 18px;">
      <td style="border: none; text-align: center; height: 18px;" colspan="2">&nbsp;</td>
    </tr>
  </tbody>
</table>

score 0 · Accepted Answer · answered Mar 14 '19 at 05:02

You can dynamically solve this as it is below.

From the table_1 iterate the value and push it in a array, then by using a button on click you can append those table details in the another table as it is below

//Assume array "value" consists of table_1 data.

    let value = ['Bathri','Coimbatore','23'];
    let header = ["Name","Address","Age"];
    
    $("#AddRow").on("click", function() {
    
    for(let v=0; v < 3; v++){
     $("#tbl").append("<tr><td>"+header[v]+"</td><td>"+value[v]+"</td></tr>")  
    }
      
    })

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<button id=AddRow>Click To Add
</button>
<table id="tbl" style="width: 540px; ; float: left; border-collapse: collapse;" border="1">
  <tbody>
    <tr>
      <td>&nbsp;FROM:</td>
      <td>Blah Blah Blah Blah</td>
    </tr>
    <tr>
      <td>&nbsp;ADDRESS:</td>
      <td>Blah Blah Blah Blah</td>
    </tr>
    <tr>
      <td>&nbsp;CONTACT NUMBER:</td>
      <td>Blah Blah Blah Blah</td>
    </tr>
    <tr style="border: none; height: 20px;">
      <td style="border: none; text-align: center; height: 20px;" colspan="2"><strong></strong></td>
    </tr>
    <tr>
      <td>&nbsp;TO:</td>
      <td>Blah Blah Blah Blah</td>
    </tr>
    <tr>
      <td>&nbsp;ADDRESS:</td>
      <td>Blah Blah Blah Blah</td>
    </tr>
    <tr>
      <td>&nbsp;BARANGAY:</td>
      <td>Blah Blah Blah Blah</td>
    </tr>
    <tr>
      <td>&nbsp;CITY &amp; PROVINCE:</td>
      <td>Blah Blah Blah Blah</td>
    </tr>
    <tr>
      <td>&nbsp;CONTACT NUMBER:</td>
      <td>Blah Blah Blah Blah</td>
    </tr>
    <tr>
      <td>&nbsp;PRODUCT &amp; PRICE</td>
      <td>Blah Blah Blah Blah</td>
    </tr>
    <tr style="border: none; height: 18px;">
      <td style="border: none; text-align: center; height: 18px;" colspan="2">&nbsp; 
</td>
    </tr>
  </tbody>
</table>

Create & dynamically while in loop jquery

2 Answers2