php - 是否可以有一个带有 CSS Counter 增量值的文本框？

Question

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

This is the code

要求:

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

也就是说，而不是:

content: counter(serial-number);

我们有这样的东西:

content: counter(text); 

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

如有任何建议，我们将不胜感激。

Answer 1

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

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

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

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

Fiddle Demo

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