使用jquery动态添加表行号

Question

在输入字段中输入文本并单击“添加”按钮后，应出现一个新行，其中包含所写入的文本。 每个新行都必须添加到前一行之下。 “删除按钮 (x)” 应该允许用户删除确切的行。 无论哪一行被删除，行的顺序都应该保持不变。

现在，我制作了一个 jQuery，它只将输入中的文本插入到新的 tr 中。 如何让它动态添加一个新的行号？ 如何制作看起来像 X 的按钮来删除该行？

 $(document).ready(function(){ $(".add-row").click(function(){ var name = $("#name").val(); var markup = "<tr><td>" + name + "</td></tr>"; $("table tbody").append(markup); })});

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form> <input type="text" id="name" placeholder="Name"> <input type="button" class="add-row" value="Add Row"> </form> <table> <thead> <tr> <th>Name</th> </tr> </thead> <tbody> <tr> <td>Peter Parker</td> </tr> </tbody> </table>

它必须是这样的https://ibb.co/eGaVQd亲切的问候

Answer 1

有很多方法可以做到这一点。 当我发布这篇文章时，我看到 3 个可行的选项已经发布。 这是我的建议。

 $(function() { function numberRows($t) { var c = 0; $t.find("tr").each(function(ind, el) { $(el).find("td:eq(0)").html(++c + "."); }); } $("#add-service-button").click(function(e) { e.preventDefault(); var $row = $("<tr>"); $row.append($("<td>")); $row.append($("<td>").html($("#add-service").val())); $row.append($("<td>").html("<a class='del-service' href='#' title='Click to remove this entry'>X</a>")); $row.appendTo($("#service-table tbody")); numberRows($("#service-table")); }); $("#form-entry form").submit(function(e) { e.preventDefault(); $("#add-service-button").trigger("click"); }); $("#service-table").on("click", ".del-service", function(e) { e.preventDefault(); var $row = $(this).parent().parent(); var retResult = confirm("Are you sure you wish to remove this entry?"); if (retResult) { $row.remove(); numberRows($("#service-table")); } }); });

 .form-entry input { border: 1px solid #ccc; width: 75%; line-height: 2em; padding-left: 1em; } .form-entry button { border: 0; background-color: #5AD0A1; color: #fff; cursor: pointer; padding: .6em 1.25em; } .table-wrapper { font-family: Arial, sans-serif; } .table-wrapper table td { border-bottom: 1px dashed #ccc; padding: 1em .2em; } .table-wrapper table tr:last-child td { border-bottom: 0; } .table-wrapper table td:first-child { color: #ccc; width: 2em; } .table-wrapper table td:last-child a { color: #F00; text-decoration: none; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="form-entry"> <form> <input type="text" id="add-service" placeholder="Enter your service name here..." /> <button type="submit" id="add-service-button">Add</button> </form> </div> <div class="table-wrapper"> <table id="service-table" width="100%"> <tbody> </tbody> </table> </div>

根据您的描述，您想要：

• 要从输入字段添加的文本
• 要编号的每一行
• 每行允许删除条目
• 如果条目被删除，则保持一致排序的编号

这有能力做到这一点。 使用click事件或submit事件使我们能够让用户按下Enter键或单击“添加”按钮。 我添加了一个提示，以与用户确认他们希望删除该条目。 然后可以使用一个小函数来提供和更新每行的数字。

希望这可以帮助。

Answer 2

可能是这样的：

 $(document).ready(function(){ $(".add-row").click(function(){ var name = $("#name").val(); var markup = "<tr><td>" + name + "</td><td style=\\"cursor:pointer;\\" onclick=\\"del(this);\\">Delete</td></tr>"; $("table tbody").append(markup); $("#name").val(''); }); }); function del(_el){ $(_el).parent().remove(); }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <form> <input type="text" id="name" placeholder="Name"> <input type="button" class="add-row" value="Add Row"> </form> <table border="1"> <thead> <tr> <th>Name</th><th>&nbsp;</th> </tr> </thead> <tbody> <tr> <td>Peter Parker</td><td style="cursor:pointer;" onclick="del(this);">Delete</td> </tr> </tbody> </table>

Answer 3

这真的很粗糙，看起来很糟糕，但它会做你想做的事。

$(document).ready(function(){
    var count = 1;
        $(".add-row").click(function(){
        var name = $("#name").val();
        var markup = "<tr><td>"+ count + name + "<button>x</button</td></tr>";
        count++
        $("table tbody").append(markup);
   })
});

Answer 4

那么你开始建立https://www.tutorialrepublic.com/faq/how-to-add-remove-table-rows-dynamically-using-jquery.php

那为什么不继续呢？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
    <form>
        <input type="text" id="name" placeholder="Name">
        <input type="button" class="add-row" value="Add Row">
    </form>
    <table>
        <thead>
            <tr>
                <th>Name</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Peter Parker</td>
            </tr>
        </tbody>
    </table>

<script type="text/javascript">
    $(document).ready(function(){
        $(".add-row").click(function(){
            var name = $("#name").val();
            var markup = "<tr><td><button onclick=\"removeItem(this);\">X</button></td><td>" + name + "</td></tr>";
            $("table tbody").append(markup);
        });
    });

    function removeItem(e){
            $(e).parent().parent().remove();
    }
</script>
</body>
</html>

---