Question

在输入字段中输入文本后，单击＆＃34;添加＆＃34;按钮，应该出现一个新行，并写入文本。必须在前一个下添加每个新行。＆＃34;删除按钮（x）＆＃34;应该让用户删除确切的行。无论哪一行被删除，行的顺序应保持不变。

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

HTML

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

JQUERY

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

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

Answer 1

有很多方法可以做到这一点。正如我发布的那样，我看到已经发布了3个可行的选项。这是我的建议。

＆＃13;

$(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"));
    }
  });
});

＆＃13;

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

＆＃13;

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

＆＃13;

根据您的描述，您需要：

要从输入字段添加的文本
要编号的每一行
允许删除条目的每一行
删除条目时保持一致排序的数字

这有能力做到这一点。使用click事件或submit事件，我们可以让用户按 Enter 键或点击＆＃34;添加＆＃34;按钮。我添加了一个提示，以确认用户是否要删除该条目。可以使用一个小函数来提供和更新每一行的数字。

希望这有帮助。

Answer 2

可能是这样的：

class MultipleFileForm(forms.ModelForm):

    def save(self):
        files = []

        if not 'file' in self.files:
            return files

        for single_file in self.files.getlist('file'):
            file = self.Meta.model(
                file=single_file,
            )
            file.save()
            files.append(file)

        return files

    class Meta(object):
        model = FileModel
        fields = ["file"]
        widgets = {
            'file': forms.FileInput(attrs={
                'multiple': True,
            }),
        }

$(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();
}

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>

使用jquery动态添加表行号

4 个答案: