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

Is the Bootstrap datetimepicker malfunctioning without any console errors to indicate a potential conflicting script?

Chaining inheritance through Object.create

Populate a select list in real time with dynamically generated options

Adding information to an array within a document in a MongoDB database

I would like to know the method for inserting an HTML element in between the opening and closing tags of another HTML element using

Replace specific text with a span element around it?

The local copy of Jquery.min.js is failing to trigger the window load function

How to use jQUERY to retrieve the parent directory of a given URL

Dynamic Automatic URL Refresh with Javascript

Handling and iterating through unfamiliar objects in AngularJS

Challenges arise when attempting to return an early resolution within promises in JavaScript

The plugin that simplifies adding and removing form fields in jQuery

Achieving Vertical Center Alignment in CSS

Issues with AJAX form submission functionality

Steps for adding a forked version of a library in package.json

Building a custom Vuetify extension to enhance core features

Utilizing Jquery's replacewith function to extract and read the id value

Issue with rendering Backbone subview correctly

Content will be loaded only after the user clicks on the item

Use an EditText to capture user input, then pass the variables to a Webview by executing a javascript command