Возможно ли иметь текстовое поле со значением увеличения счетчика CSS?

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 и т. Д.) На странице. Я говорю это, потому что (а) уникальность не может быть полностью достигнута, если они сгенерированы на стороне клиента, и (б) значения могут быть легко изменены, если они сгенерированы на стороне клиента и сохранены как есть в БД. В любом случае было бы лучше проверить входные данные перед сохранением в БД.

Но, если по какой-либо причине вы хотите продолжить делать это на стороне клиента, то вы могли бы написать простую функцию index() функцию JQuery и установить индекс tr в input поле. Я не эксперт в jQuery, и есть вероятность, что это можно было бы сделать проще.

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

Fiddle Demo

Как Броуди было указано в комментариях, вы можете изменить 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 { 

      } 
     }); 
    }); 

Было бы лучше, чтобы положить его в функцию или даже (как это было предложено другими пользователями) сделать небольшой туда и обратно на сервер, и пусть сервер создать строку в базе данных и вернуть вам серийный номер , Затем, когда вы отправляете сообщение, у вас есть серийный номер, который вы можете использовать для идентификации строки для обновления.