Question

我创建了一个动态表，使用PHP和jQuery，并使用CSS创建自动增量序列号。

要求：

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

也就是说，而不是：

content: counter(serial-number);

我们有这样的事情：

content: counter(text);

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

任何建议都将受到赞赏。

Answer 1

不，CSS计数器值无法在CSS外部访问。因此，没有办法将其分配给input框或使用JS / jQuery等访问该值。更多详细信息可以在答案here中找到，因此我不打算重复它。

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

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

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

Fiddle Demo

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

Answer 2

如果你想找到一个客户端解决方案，我真的很喜欢@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 {

            }
        });
    });

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

是否可以使用带有CSS Counter增量值的文本框？

2 个答案: