I need to generate in JavaScript a new row on a table with a (dropdown list) who is already filled and empty other cells and I want the function to work no matter which cells is the DropDown list in the row.
Here's my function :
function AddRows(tableid){
var table = document.getElementById(tableid);
var tbody = table.tBodies[0];
var rowCount = tbody.rows.length;
var row = table.insertRow(rowCount);
var lastRow = tbody.rows[rowCount-1];
var clonedRow = lastRow.cloneNode(true);
var editContent = !row.isContentEditable;
row.contentEditable = editContent;
row.setAttribute('onkeyup', "Disabled();");
row.setAttribute('onclick', "SetSelectedRow(this)");
row.setAttribute('id', 'Combo_row'+(row.rowIndex - 1)); //Set the id of the row
row.setAttribute('class', 'default');
for(i=0; i< clonedRow.cells.length;i++){
var clonedcell = clonedRow.cells[i];
if(!clonedcell.children[0]){
clonedcell.innerText= "";
}
}
tbody.appendChild(clonedRow);
}
The problem is that when i add a row it keep what i added on the input and i only want to keep whats in the dropdown list the other cell should be empty cause i want the user to insert other information
I found a solution ! If someone need here's my working function :
/* function to add row with a select */
// lPos : list of cells position in the row to reset
function addSelect(SelectTableId, lPos) {
var Table = document.getElementById(SelectTableId); // Get the table id
var R = document.querySelectorAll('tbody .AddRowClass')[0]; // Get the row className
var C = R.cloneNode(true); // Clone the row
for (let i = 0; i< lPos.length; i++){ // Clear selected cells of the row
C.children[lPos[i]].textContent = ""
}
Table.appendChild(C); // Display the new row with filled dropdown list and empty cells
}