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

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

add a specific class to the input boxes or row then just loop over those? — Prisoner, Nov 29 '12 at 17:36
I've heard that IE can't find elements by class name is why I didn't try to go that route. Do you know if this indeed the case? — atfergus, Nov 29 '12 at 17:39
check out http://stackoverflow.com/questions/7410949/javascript-document-getelementsbyclassname-compatibility-with-ie — Prisoner, Nov 29 '12 at 17:45

score 1 · Answer 1 · answered Nov 29 '12 at 17:40

1

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

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

answered Nov 29 '12 at 17:40

Peter Gluck

8,168
1
38
37

I was hoping there might be an acceptable way to do it without jQuery but I might end up doing this, thanks. – atfergus Nov 29 '12 at 17:44

score 0 · Answer 2 · answered Nov 29 '12 at 17:36

0

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.

answered Nov 29 '12 at 17:36

user1820381

82
7

Would I have to maintain that array globally? It seems having an extra variable keep track of them is kinda wasteful. – atfergus Nov 29 '12 at 17:40
not necessarily but its the easiest way. and don't worry it's actually more resource friendly than anything else if you just store the id for example. just keep in mind that you should remove the deleted rows from your array. To generate unique ids for each row you can use something like getTime(); – user1820381 Nov 29 '12 at 17:46

score 0 · Accepted Answer · answered Nov 29 '12 at 19:31

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.

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

3 Answers3