How to insert new values to cloned table row's cells in pure JavaScript?

Question

 function copy_checklist(row_id, poNum) {
            var row = document.getElementById("item"); //get table row
            var table = document.getElementById("checklist");
            var clone = row.cloneNode(true);
            clone.id = row_id;
            var tds = null;
            for (var i = 0; i < clone.length; i++) {
            	tds = clone[i].getElementsByTagName("td");
            	for (var n = 0; n < tds.length; n++) {
            		tds[n].innerHTML = poNum;
            	}
            }

            table.appendChild(clone);
        }

I am using the following function -

trying to set new value of td of the newly cloned tr, but it shows the old value only. It clones the tr element fine but only shows old value. I want the new cloned tr's cells to have new values passed onto the function. And also if I try to check the length of this newly cloned tr by doing findElementsByTag, it returns 0.

charlietfl · Accepted Answer

You can simplify accessing the elements by using clone.cells then iterate that collection or access specific cells by index

function copy_checklist(row_id, poNum) {
  var row = document.getElementById("item"); //get table row
  var table = document.getElementById("checklist");
  var clone = row.cloneNode(true);
  var cells = clone.cells;

  clone.id = row_id;
  cells[0].innerHTML = poNum
  // OR
  //Array.from(cells).forEach((cell, index) => cell.innerHTML = poNum);

  table.appendChild(clone);
}

How to insert new values to cloned table row's cells in pure JavaScript?

Answers (1)

Related Questions

How to insert new values to cloned table row&#39;s cells in pure JavaScript?

Answers (1)

Related Questions

How to insert new values to cloned table row's cells in pure JavaScript?