0

我已经使用 PHP 和 jQuery 创建了一个动态表，并且正在使用 CSS 来创建自动递增序列号。

这是代码

要求：

目前，自动生成序列号的列是空白的。是否可以添加一个生成序列号的文本框，以便在保存的同时检索值？

也就是说，而不是：

content: counter(serial-number);

我们有这样的东西：

content: counter(text);

或者是否有任何可能的方法将序列号保存在文本框中以保存在数据库中。

任何建议将不胜感激。

4

2 回答 2

1

不，CSS 计数器值不能在 CSS 之外访问。因此，无法将其分配给一个input框或使用 JS/jQuery 等访问该值。更多详细信息可以在此处的答案中找到，因此我不会重复。

就像 charlietfl 在他的评论中提到的那样，我理想情况下建议检查服务器然后设置值（使用 AJAX）或在后端完全生成序列号并只显示占位符值（如 1、2、3 等）这页纸。我这样说是因为（a）如果它们是在客户端生成的，则无法完全获得唯一性，并且（b）如果它们是在客户端生成并按原样存储到数据库中，则很容易被篡改。无论哪种方式，在存储到数据库之前验证传入的数据也会更好。

但是，如果出于某种原因您希望在客户端继续执行此操作，那么您可以编写一个简单的函数 jQuery 的index()功能并将索引设置为tr框input。我不是 jQuery 专家，因此有可能以更简单的方式实现这一点。

function numberRows(){
  $("#tb2 tr").each(function(){
    $(this).find("td:first-child input").val($("#tb2 tr").index(this));
  });    
}

小提琴演示

正如布罗迪在评论中指出的那样，您可能希望将input只读输入更改为隐藏输入，但我会将其留给您。我使用只读框只是为了明显地显示值。

于 2016-02-10T14:27:38.693 回答
0

如果您想使用客户端解决方案，我真的很喜欢@harry 的回答。

查看您的小提琴中的内容，如果您要在第一列中创建隐藏输入并将其设置为默认值 1（或从服务器返回的任何内容），您可以允许它像这样递增，在加载时，您拉出第一行的序列号，然后当用户添加行时，序列号递增。这也将输入置于隐藏字段中，因此从用户的角度来看，它不容易更改（假设您不希望他们手动更改 sn）。理想情况下，您还可以从此而不是 CSS 控制显示序列号。

  var serial = $('input[name="serialNumber"]').eq(0).val();
  $(function(){
        $('#addMore2').on('click', function() {
                var data = $("#tb2 tr:eq(1)").clone(true).appendTo("#tb2");
                data.find("input").val('');
                data.find('input[name="serialNumber"]').val(++serial);
        });
        $(document).on('click', '.remove', function() {
            var trIndex = $(this).closest("tr").index();
                if(trIndex>1) {
                $(this).closest("tr").remove();
            } else {

            }
        });
    });

最好将它放入一个函数中，甚至（如其他用户所建议的那样）对服务器进行一次小的往返，让服务器在您的数据库中创建该行并返回一个序列号。然后，当您发布时，您有一个序列号，您可以使用它来标识要更新的行。

于 2016-02-10T14:36:06.583 回答