CODEWITHSUNDEEP
javascriptjqueryhtml
Jennis Vaishnav
Jennis Vaishnav

Reputation: 341

Cannot understand the behavior prepend method

I used code to create a <th>, This below code works fine for the first time but doesn't work when i create them repeatedly,i.e, Again and again.

function createTH(){
  var noOfRow = document.getElementById("addItemTable").rows.length;
    var temp = document.getElementById("addItemTable");
    var table = temp.getElementsByTagName('tbody')[0];
    var row = table.insertRow(-1);
    var cell2 = row.insertCell(0);
    var cell3 = row.insertCell(1);
    cell2.innerHTML="this is inside table div";
    cell2.style="border: dashed;"
    cell3.innerHTML="this is inside another another div";
    cell3.style="border: dashed;"
    var thContent = '<th class="col2">' + '<br>' + 'test' + '&nbsp &nbsp' + '*' + '' + '</th>'
    var mainTable = document.getElementById("addItemTable");
    $('#addItemTable>tbody>tr').prepend(thContent);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="m-content" id="elementDiv">
  <table id="addItemTable">
    <tbody>

    </tbody>
  </table>
</div>
<input type="button" onclick="createTH()" value="Click to create <th> again and again"/>

My current output is a mess after doing the second click on the button.

My expected output is in following pattern:

<tr>
...
<th><td><td>//I only want to repeat this single line on every click of button.
<th><td><td>
<th><td><td>//I'm looking to create this kind of repetition on click of button. 
...
</tr>

For more reference you can visit: Dynamic Creation of th, as this question is continuation of the above mentioned thread. I made a new thread because old thread would become more tedious and the length of question would be increased.

Any help would be greatly appreciated.

Upvotes: 1

Views: 71

Answers (4)

Jennis Vaishnav
Jennis Vaishnav

Reputation: 341

I found one more solution for this question by making use of Outer Html. Just a different approach to this problem.

function createTH() {
  var noOfRow = document.getElementById("addItemTable").rows.length;
  var temp = document.getElementById("addItemTable");
  var table = temp.getElementsByTagName('tbody')[0];
  var row = table.insertRow(-1);
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  var cell3 = row.insertCell(2);
  elemVal = '<th class="col2">' + "test" + '&nbsp &nbsp' + '*' + '' + '</th>';
  cell1.outerHTML = elemVal;
  cell2.innerHTML = "this is inside table div";
  cell2.style = "border: dashed;"
  cell3.innerHTML = "this is inside another another div";
  cell3.style = "border: dashed;"
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="m-content" id="elementDiv">
  <table id="addItemTable">
    <tbody>

    </tbody>
  </table>
</div>
<input type="button" onclick="createTH()" value="Click to create <th> again and again" />

Upvotes: 0

Asfan Shaikh
Asfan Shaikh

Reputation: 769

You can use row counter to increase index number of row and append data in it when function calls.

Here is Demo

var rowCounter = 0;
function createTH(){
  var noOfRow = document.getElementById("addItemTable").rows.length;
    var temp = document.getElementById("addItemTable");
    
    var table = temp.getElementsByTagName('tbody')[0];
    var row = table.insertRow(-1);
    var cell2 = row.insertCell(0);
    var cell3 = row.insertCell(1);
    cell2.innerHTML="this is inside table div";
    cell2.style="border: dashed;"
    cell3.innerHTML="this is inside another another div";
    cell3.style="border: dashed;"
    var thContent = '<th class="col2">' + '<br>' + 'test' + '&nbsp &nbsp' + '*' + '' + '</th>'
    var mainTable = document.getElementById("addItemTable");
    $('#addItemTable>tbody>tr').eq(rowCounter).prepend(thContent);
    rowCounter++;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="m-content" id="elementDiv">
  <table id="addItemTable">
    <tbody>

    </tbody>
  </table>
</div>
<input type="button" onclick="createTH()" value="Click to create <th> again and again"/>

Upvotes: 0

mplungjan
mplungjan

Reputation: 178403

You keep adding to every row.

Use jQuery consistently and it helps. Also DRY: Do not repeat yourself

Like this

const cellStyle = { "style": "border: dashed;" }

$("#addRow").on("click", function() {
  const $tb = $("#addItemTable tbody");
  let $newRow = $("<tr/>");
  $newRow.append('<th class="col2"><br />test&nbsp;&nbsp;*</th>');
  $newRow.append($("<td/>", cellStyle).text("this is inside table cell"));
  $newRow.append($("<td/>", cellStyle).text("this is inside another table cell"));
  $tb.prepend($newRow);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="m-content" id="elementDiv">
  <table id="addItemTable">
    <tbody>

    </tbody>
  </table>
</div>
<input type="button" id="addRow" value="Click to create <tr> again and again" />

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337714

The issue is because you're appending thContent to all tr which you select by jQuery, not just the new one. To fix this change the line to only append to the new row instance:

$(row).prepend(thContent);

However it's worth noting that you're using an odd combination of plain JS and jQuery. If you're using jQuery already you can simplify the code drastically:

$('#add').on('click', function() {
  var rowHtml = '<tr><th class="col2"><br />test&nbsp; &nbsp;*</th><td>this is inside table div</td><td>this is inside another another div</td></tr>';
  $('#addItemTable').append(rowHtml);
});
td { border: dashed; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="m-content" id="elementDiv">
  <table id="addItemTable">
    <tbody></tbody>
  </table>
</div>
<button id="add">Click to create &lt;th&gt; again and again</button>

Upvotes: 2

Related Questions