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中的小提琴。基本上你需要找到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/

Answer 2

查看我为您制作的这个JSFiddle：http://jsfiddle.net/o81uceen/

这使用jQuery（请注释，如果这不是你的可能性）。首先，它使用以下方法选择适当的行：

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

其中id是您要隐藏的行的ID。现在我们已经隔离了行，我们可以将它用于上下文搜索。

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

这将返回行td中找到的所有targetRow元素的数组。然后你可以使用jQuery的each函数（它采用一个带索引和对象的lambda）迭代所有td并将它们的innerHTML设置为一个空字符串。

Answer 3

您也可以使用

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

清除内容

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

3 个答案: