CODEWITHSUNDEEP
javascripthtml
atfergus
atfergus

Reputation: 320

How to tell if a row contains cells with textbox with javascript

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

Upvotes: 1

Views: 1547

Answers (3)

atfergus
atfergus

Reputation: 320

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.

Upvotes: 0

Peter Gluck
Peter Gluck

Reputation: 8236

You could use jQuery. Assuming row is a DOM element, this should work:

var textBoxes = $("input:text", row);

Upvotes: 1

user1820381
user1820381

Reputation: 82

i guess the easiest option would be to add the created rows to an array. This way you simply have to delete the rows inside the array and not iterate through the whole table.

Upvotes: 0

Related Questions