javascript - 使用 Javascript 清除表行中的所有数据

Question

我正在创建一个表，用户可以在其中显示/消失行，并且希望在选择删除行时清除隐藏行中的所有数据。

我试图操作的表如下:

<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>

我有这个功能来切换行:

    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';
    }
};

这没有任何效果。我也尝试过:

p.innerHTML = "";

但这会清除整行，但我只想清除该行中 td 中保存的数据。我究竟做错了什么？

谢谢。

Answer 1

这是一个纯 JS 中的 Fiddle。基本上，您需要找到 TR 下的所有输入并循环它们，将它们设置为空:

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/