Question

I have a table that is built dynamically from a user specified query to a database and I want to give the user the option to edit the data from the generated HTML table. When the user double clicks on the row containing the data they want to edit, I have a new row appear underneath it with textboxes for them to submit new values. Right now, when the user clicks double clicks two rows, both rows of textboxes remain in the table and I want to delete the first row before the second shows up. My question is, what is a good was to find table rows containing textboxes so that I can perhaps use JavaScript’s deleteRow() function?

I’m generating rows like so:

function editRow(row) {
    var table = document.getElementById("data");
    var newRow = table.insertRow(row.rowIndex + 1);
    var cell;

    for (var i = 0; i < row.childNodes.length; i++) {
        cell = newRow.insertCell(i);
        textBox = document.createElement("input");
        textBox.type = "text";
        textBox.placeholder = row.childNodes[i].innerHTML;
        textBox.style.textAlign = "center";
        textBox.style.width = "90%";
        cell.appendChild(textBox);
    }
}

and the only way I can I can think of doing it is something like (pseudo code):

for all table rows 
    if row.childNodes.innerHTML contains 'input' 
        deleteRow(index)

Thanks for the help

Answer 1

I ended up doing the following:

function editRow(row) {
    var table = document.getElementById("data");
    clearExistingTextBoxes(table);
    ...
}

function clearExistingTextBoxes(table) {
    var tBoxRow = table.getElementsByTagName("input");
    if (tBoxRow.length > 0) {
    tBoxRow = tBoxRow[0].parentNode.parentNode;
    table.deleteRow(tBoxRow.rowIndex);
    }
}

Assuming I’m only going to be clearing one row at a time.