Having difficulty grasping the concept behind the prepend method's functionality

Question

Having difficulty grasping the concept behind the prepend method's functionality

I encountered an issue with my code, where I successfully created a <th> element initially, but faced problems when trying to create it repeatedly.

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

Upon clicking the button for the second time, the output of my code becomes chaotic.

I aim to achieve the following output pattern:

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

For further details, you can refer to: Dynamic Creation of th. This question serves as a follow-up to the previous discussion thread. Creating a new thread was necessary due to the complexity and length constraints of the original question.

Your assistance in resolving this issue would be highly appreciated.

javascript jquery html

Answer 1

Answer №1

The issue is arising because you are appending thContent to every single tr element that is selected by jQuery, instead of just the new one. To resolve this, modify the line so that it only appends to the new instance of row:

$(row).prepend(thContent);

It's important to mention that your code incorporates a mix of plain JavaScript and jQuery methods. If you are already utilizing jQuery, you can significantly streamline the code:

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

Answer 2

The issue is arising because you are appending thContent to every single tr element that is selected by jQuery, instead of just the new one. To resolve this, modify the line so that it only appends to the new instance of row:

$(row).prepend(thContent);

It's important to mention that your code incorporates a mix of plain JavaScript and jQuery methods. If you are already utilizing jQuery, you can significantly streamline the code:

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

Answer 3

Answer №2

Continuously include new elements to each row.

Consistently utilize jQuery for efficiency. Remember the DRY principle: Do not repeat yourself.

Just 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  *</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" />

Answer 4

Continuously include new elements to each row.

Consistently utilize jQuery for efficiency. Remember the DRY principle: Do not repeat yourself.

Just 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  *</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" />

Answer 5

Answer №3

If you want to increase the index number of a row and append data in it when a function is called, you can use a row counter.

Check out this 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 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"/>

Answer 6

If you want to increase the index number of a row and append data in it when a function is called, you can use a row counter.

Check out this 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 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"/>

Answer 7

Answer №4

My unique solution to this problem involved utilizing the concept of Outer Html. It was a different perspective that helped me find another way to approach the question.

function generateTableHeader() {
  var rowCount = document.getElementById("addItemTable").rows.length;
  var temporary = document.getElementById("addItemTable");
  var tableBody = temporary.getElementsByTagName('tbody')[0];
  var newRow = tableBody.insertRow(-1);
  var cell1 = newRow.insertCell(0);
  var cell2 = newRow.insertCell(1);
  var cell3 = newRow.insertCell(2);
  elementValue = '<th class="col2">' + "test" + '&nbsp &nbsp' + '*' + '' + '</th>';
  cell1.outerHTML = elementValue;
  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="generateTableHeader()" value="Click to create <th> again and again" />

Answer 8

My unique solution to this problem involved utilizing the concept of Outer Html. It was a different perspective that helped me find another way to approach the question.

function generateTableHeader() {
  var rowCount = document.getElementById("addItemTable").rows.length;
  var temporary = document.getElementById("addItemTable");
  var tableBody = temporary.getElementsByTagName('tbody')[0];
  var newRow = tableBody.insertRow(-1);
  var cell1 = newRow.insertCell(0);
  var cell2 = newRow.insertCell(1);
  var cell3 = newRow.insertCell(2);
  elementValue = '<th class="col2">' + "test" + '&nbsp &nbsp' + '*' + '' + '</th>';
  cell1.outerHTML = elementValue;
  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="generateTableHeader()" value="Click to create <th> again and again" />

Having difficulty grasping the concept behind the prepend method's functionality

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Currently in motion post file selection

Bootstrap CDN causing modals to fail to appear

How can I transfer Gmail message using express rendering parameters?

Determine in JavaScript if one date occurs exactly one week after another date

Move the cursor to the bottom of a div that can be edited

Effortless method to handle package.json configurations

What is the best way to extract text from a list item in an unordered list (

jQuery selector for attributes with values that are higher than a specific amount using the ">" symbol or lower than a certain value using the "<" symbol

What is the process of creating a MaterialUI checkbox named "Badge"?

AngularJS's ng-click function seems to be malfunctioning

Remove an element from an array within objects

Choose the elements that do not possess a specific class as their ancestor

Guide on how to have controller wait for promise to be resolved by an Angular service

Discover a corresponding object within an array

iOS 8 requires the use of a numeric keyboard for entering passwords

What is the method for a HTML button to trigger the execution of a Selenium (Java) code located in a remote location through a

The JTSage date box is not visible when there is no input field being displayed

Challenges with implementing asynchronous functions in NestJS controllers

Choosing an option from a dropdown menu by extracting information from JSON content

Determining When the Collapse Transition in Material UI 5 is Complete