3

我正在<tr>通过 Javascript var 添加：

var txtBox = "<tr id='dynTR'><td><input type='text' class='textBoxes' /></td><td><input type='text' class='textBoxes' value='0' /></td><td><input type='button' value='-' /></td></tr>";

我的功能是：

function AddTR(table) {
            $(table).append(txtBox);
        }

我在 HTML 中的表结构（以及函数的按钮）是：

<table id="tblTest" class="testTable">
            <thead>
                <tr>
                    <td>Product</td>
                    <td>Quantity</td>
                    <td>Remove TR</td>
                </tr>
            </thead>
            <tbody>

            </tbody>
        </table>
        <br />
        <input type="Button" id="btnTest" value="Add Table Row" onclick="AddTR($('#tblTest'))" />

那么如何.remove()在不意外删除所有标签的情况下使用 jQuery 中的函数来摆脱父<tr id='dynTR'>标签呢？

4

2 回答 2

8

考虑到这个是删除按钮：

<input type='button' value='-' />

以下将做：

$('#tblTest input[type="button"]').click(function () {
     $(this).closest('tr').remove();
});

我建议您使用 jQuery 事件处理程序而不是使用内联onclick和朋友。$(this)是被点击按钮的 jQuery 对象，.closest()将在按钮的父项中查找并找到第一个tr，然后将其删除。

jsFiddle @ShadowWizard

最好的方法是更改​​删除按钮的 HTML：

<input type='button' value='-' class='removeButton' />

所以你可以像这样定位你的删除按钮：

$('#tblTest .removeButton').click(...

这更好，因为在前面的示例中，input type="button"表格中的每个可能都会获得事件，即使我们只需要这些特殊的事件（如果表格中没有其他按钮，这不是问题）。

于 2011-05-16T07:13:21.780 回答
4

bazmegakapa 答案应该可以解决问题。此外，您应该真正避免使用内联 Javascript，这通常是不好的做法。而是这样做：

$('#btnTest').click(function() { AddTR($('#tblTest')); });

此外，为了使用元素对象的正确范围来跟上 jQuery 的约定，您可以这样做：

$('#btnTest').click(function() { AddTR.call($('#tblTest')[0]); });

然后在您的 AddTR 函数中，您可以简单地将元素表引用为this

function AddTR() {
    $(this).append(txtBox);
}

它使事情保持可预测性并遵循相同的约定。

等一下……

从理论上讲，尽管该AddTR()函数正在添加一个表格行，但它有点误导，因为它所做的只是将一个元素附加到该上下文中。你真正想做的就是函数所说的；添加一个表格行！相反，你的所作所为

var txtBox = "<tr id='dynTR'><td><input type='text' class='textBoxes' /></td><td><input type='text' class='textBoxes' value='0' /></td><td><input type='button' value='-' /></td></tr>";

如果您更改表格行结构，这相当难看，并且会导致一些变化。相反，用于.clone帮助您：

function AddTR() {
   $(this).append($('tr:last').clone());
}

见小提琴：http: //jsfiddle.net/garreh/6NUK3/1/

于 2011-05-16T07:20:24.180 回答