是否可以有一个带有 CSS 计数器增量值的文本框？

Question

我创建了一个动态 table，其中包含 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) 如果它们是在客户端生成并按原样存储到数据库中，则值很容易被篡改。无论哪种方式，最好在存储到数据库之前验证传入的数据。

但是，如果出于某种原因您希望在客户端继续执行此操作，那么您可以编写一个简单的函数 jQuery 的 index() 功能并设置 [=13] 的索引=] 到 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 的回答。

看看您 fiddle 中的内容，如果您要在第一列中创建隐藏输入并将其设置为默认值 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 {

            }
        });
    });

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

是否可以有一个带有 CSS 计数器增量值的文本框？

Is it possible to have a text box with CSS Counter increment value?

html

css

php

jquery

css-counter