Question

我有一个看起来像这样的表：

<fieldset>
    <table id="component_table">
        <thead>
            <tr>
                <th>Component</th>
                <th>Component Type</th>
                <th>Component Thickness</th>
            </tr>
        </thead>
        <tbody id="component_tb">
            <tr>
                <td><?php echo $roofComponentDropDown ?></td>
                <td><?php echo $roofComponentTypeDropDown ?></td> 
                <td><input id="component_thickness" name="component_thickness[]" type="text"></td>
            </tr>
        </tbody>
    </table>
    <input type="button" value="+" id="addRows" />
</fieldset>

在浏览器中看起来像这样，只是为了让您更好地了解我想要做的事情。

当用户点击+按钮时，我在这里运行这个JQuery函数：

$(function() {
    var $componentTB = $("#component_tb"),
        $firstTRCopy = $componentTB.children('tr').first().clone();
    $("#addRows").click(function() {
        $componentTB.append($firstTRCopy.clone());
    });
});

将克隆我的<tr>并将其附加到我的桌子上，使其看起来像这样： enter image description here

现在这是我的问题，当我在新行中添加时，我也尝试在我的表中插入另一个<td>，其中包含一个名为remove的链接或按钮，单击此按钮将删除添加的<tr>。

以下是我的尝试：

$componentTB.append($firstTRCopy.clone()).after("<td><a href='#'>Remove</a></td>");

并没有完全给出我需要的输出 enter image description here

接近了，如果我改变一些CSS，我想我可以让它工作..（我想找到红线所在的链接）

这是我尝试使用-按钮（首选）

$componentTB.append($firstTRCopy.clone()).after("<input type='button' value='-' id='addRows' />");

然而，输出根本不能正常工作，只是并排添加按钮而不是克隆的表行的一部分。

enter image description here

如何将-按钮添加到克隆行中，如何删除单击删除链接/按钮的行？

任何帮助都会很棒，谢谢。

Answer 1

第一个问题是你需要在你的表中使用第四个用于存在的额外按钮。这需要存在于第一行以及所有其他行（它不需要具有' - '标签中的按钮）。

就获取要删除的行而言，您可以在行中添加id列以用于删除。

这是一个可以执行您想要的工作Html页面：

<html>
<head></head>
<body>
<table>
    <thead>
        <tr>
            <th>Component</th>
            <th>Component Type</th>
            <th>Component Thickness</th>
            <th>Remove</th>
        </tr>
    </thead>
    <tbody id="component_tb">
        <tr id="row0">
            <td><select><option value="test1">Test1</option><option value="test2">Test2</option></select><td>
            <td><select><option value="test1">Test1</option><option value="test2">Test2</option></select><td>
            <td><select><input type="text" /></select><td>
            <td></td>
        </tr>
    </tbody>
</table>
<input type="button" value="+" id="addRows" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(function() {
    var $componentTB = $("#component_tb"),
        $firstTRCopy = $("#row0").clone();
        $idVal = 1;
    $("#addRows").click(function() {
        var copy = $firstTRCopy.clone();
        var newId = 'row' +$idVal;
        copy.attr('id', newId);
        $idVal += 1;
        copy.children('td').last().append("<a href=\"javascript:remove('" + newId + "')\">Remove</a>");
        $componentTB.append(copy);
    });
});
function remove(id){
    $("#" + id).remove();
}
</script>
</body>
</html>

但是，我还建议您查看双向绑定，例如Angular或Knockout.js。这些允许您将javascript模型连接到您的数据，并将处理删除和更干净地添加新行。

编辑：如果您想更改附加到最终td标记的内容，只需更改附加内容：

copy.children('td').last().append("<a href=\"javascript:remove('" + newId + "')\">Remove</a>");

如何在.clone（）上添加一个元素，该元素是一个将删除克隆的按钮

1 个答案: