CODEWITHSUNDEEP
javascripthtml
Jonathan Bechtel
Jonathan Bechtel

Reputation: 3607

Clearing all data from a table row with Javascript

I'm creating a table where users can make rows appear/disappear, and would like all the data from the hidden rows to be cleared when they choose to delete a row.

The table I'm trying to manipulate is as follows: 

<form name="ingredient-table">
<table border="1" style="padding: 5px;">
<tr>
    <td>Ingredient Name</td>
    <td>Amount (in Mg)</td>
    <td>% Carrier</td>
    <td>$$/Kilo</td>
    <td></td>
    <td>Total Carrier Volume</td>
    <td>Total Ingredient Volume</td>
</tr>
<tr>
    <td><input type="text" id="a" list="ingredients"></input></td>
    <td><input type="number" id="b"> Mg</input></td>
    <td><input type="number" id="c"></input> %</td>
    <td><input id="d"></input></td>
    <td><button type="button" onclick="calculate('a', 'b', 'c', 'd', 'e', 'f')">Calculate Final   
     Volume</button></td>
    <td id="e"></td>
    <td id="f"></td>
    <td><a href="#" onclick="toggleRow('row2')">New Ingredient</a></td>

</tr>
<tr id="row2" style="display: none;">
    <td><input type="text" id="h" list="ingredients"></input></td>
    <td><input type="number" id="i"> Mg</input></td>
    <td><input type="number" id="j"></input> %</td>
    <td><input id="k"></input></td>
    <td><button type="button" onclick="calculate('h', 'i', 'j', 'k', 'l', 'm')">Calculate Final 
     Volume</button></td>
    <td id="l"></td>
    <td id="m"></td>
    <td><a href="#" onclick="toggleRow('row3')">New Ingredient</a></td>
    <td><a href="#" onclick="toggleRow('row2')">Delete Ingredient</a></td>
</tr>
<tr id="row3" style="display: none;">
    <td><input type="text" id="o" list="ingredients"></input></td>
    <td><input type="number" id="p"> Mg</input></td>
    <td><input type="number" id="q"></input> %</td>
    <td><input id="r"></input></td>
    <td><button type="button" onclick="calculate('o', 'p', 'q', 'r', 's', 't')">Calculate Final 
     Volume</button></td>
    <td id="s"></td>
    <td id="t"></td>
    <td><a href="#" onclick="toggleRow('row4')">New Ingredient</a></td>
    <td><a href="#" onclick="toggleRow('row3')">Delete Ingredient</a></td>
</tr>
<tr id="row4" style="display: none;">
    <td><input type="text" id="v" list="ingredients"></input></td>
    <td><input type="number" id="w"> Mg</input></td>
    <td><input type="number" id="x"></input> %</td>
    <td><input id="y"></input></td>
    <td><button type="button" onclick="calculate('v', 'w', 'x', 'y', 'z', 'a1')">Calculate Final 
     Volume</button></td>
    <td id="z"></td>
    <td id="a1"></td>
    <td><a href="#" onclick="toggleRow('row5')">New Ingredient</a></td>
    <td><a href="#" onclick="toggleRow('row4')">Delete Ingredient</a></td>
</tr>
<tr id="row5" style="display: none;">
    <td><input type="text" id="a3" list="ingredients"></input></td>
    <td><input type="number" id="a4"> Mg</input></td>
    <td><input type="number" id="a5"></input> %</td>
    <td><input id="a6"></input></td>
    <td><button type="button" onclick="calculate('a3', 'a4', 'a5', 'a6', 'a7', 'a8')">Calculate    
     Final Volume</button></td>
    <td id="a7"></td>
    <td id="a8"></td>
    <td><a href="#" onclick="noMoreRows()">New Ingredient</a></td>
    <td><a href="#" onclick="toggleRow('row5')">Delete Ingredient</a></td>
</tr>
</table>
</form>

I have this function to toggle the rows: 

    function toggleRow(id) {
    var p = document.getElementById(id);

    if (p.style.display =='table-row') {
        p.style.display = 'none';
        p.td.innerHTML   = "";
    }

    else {
        p.style.display = 'table-row';
    }
};

This does not have any effect. I've also tried:

p.innerHTML = "";

But this clears the entire row but I only want to clear the data held within the td's in that row. What am I doing wrong?

Thank you.

Upvotes: 0

Views: 7967

Answers (3)

ColbyCo
ColbyCo

Reputation: 21

You can also use 

$('#id').empty();

to clear the contents

Upvotes: 0

Delorian
Delorian

Reputation: 340

Here's a Fiddle in pure JS. Basically you need to find all the inputs under your TR and loop through them, setting them to empty:

window.toggleRow = function (id) {
    var p = document.getElementById(id);

    if (p.style.display =='table-row') {
        p.style.display = 'none';
        var inputs = p.getElementsByTagName('input');
        for (i = 0; i < inputs.length; i++) { 
            inputs[i].value = "";
        }
    }

    else {
        p.style.display = 'table-row';
    }
};

http://jsfiddle.net/Delorian/hv19aLwL/

Upvotes: 1

tigertrussell
tigertrussell

Reputation: 521

Check out this JSFiddle I made for you: http://jsfiddle.net/o81uceen/

This uses jQuery (please comment if this is not a possibility for you). First it selects the appropriate row using this:

var targetRow = $('tr#'+id);

Where id is the ID of the row that you want to hide. Now that we've isolated the row, we can use it for a contextual search.

var targetDataArray = $('td', targetRow);

This will return an array of all td elements found in the row targetRow. Then you can use the each function of jQuery (which takes a lambda which takes index and object) to iterate over all tds and set their innerHTML to an empty string.

Upvotes: 0

Related Questions