My MySQL query generates input rows in a table, allowing users to edit them. However, I want users to be able to add new rows as well. To achieve this, I created a JavaScript function that adds a new row when a button is clicked. The issue I'm facing is that the new input tag is not receiving its id or class.
function addrow(id) {
var tableref = document.getElementById(id);
var nextseq = document.getElementById('maxseq').value;
var newRow = tableref.insertRow(2);
var rowid = "tr"+nextseq;
//first cell
var cell1 = newRow.insertCell(0) ;
var text1 = document.createTextNode(nextseq);
cell1.appendChild(text1);
var id1 = "cell" + nextseq + "1";
cell1.id = id1;
//second cell
var id2 = "cell" + nextseq + "2";
var cell2 = newRow.insertCell(1).innerHTML = '<input type = "text" id = id2 class = "xxx" style = "width:100px" value = "1001-01-01" >';
...more functionality that is working correctly ...
}
When I alert on "test," it returns 'test is null,' indicating that the id is not being set.
I also attempted
var abc = document.getElementsByClassName("xxx");
alert("abc is " + abc);
The alert displays "abc is [object HTMLCollection]." How can I resolve this issue and ensure that the id and class work as intended?