Возможно ли иметь текстовое поле со значением приращения счетчика CSS?
Я создал динамическую таблицу с PHP и jQuery и использую CSS для создания серийного номера с автоматическим приращением.
Требование:
На данный момент столбец, в котором автоматически генерируются серийные номера, пуст. Можно ли добавить текстовое поле, в котором генерируются серийные номера, чтобы значения можно было получить во время сохранения?
То есть вместо того, чтобы:
content: counter(serial-number);
у нас есть что-то вроде этого:
content: counter(text);
Или есть какой-либо возможный способ сохранить серийные номера в текстовом поле для сохранения в базе данных.
Любые предложения будут оценены.
Решение
Нет, значения счетчика CSS не могут быть доступны вне CSS. Таким образом, нет способа присвоить это input или введите значение, используя JS / jQuery и т. д. Более подробную информацию можно найти в ответе. Вот и поэтому я не собираюсь повторять это.
Подобно тому, как charlietfl упомянул в своем комментарии, в идеале я бы порекомендовал проверить на сервере и затем установить значение (используя AJAX) или полностью выполнить генерацию серийного номера на сервере и просто отображать значения заполнителей (например, 1, 2, 3 и т. Д.) В страница. Я говорю это потому, что (а) уникальность не может быть полностью достигнута, если они генерируются на стороне клиента, и (б) значения могут быть легко изменены, если они сгенерированы на стороне клиента и сохранены как есть в БД. В любом случае, было бы также лучше проверить входящие данные перед сохранением в БД.
Но, если по какой-либо причине вы хотите продолжить делать это на стороне клиента, то вы можете написать простую функцию jQuery’s index() особенность и установить индекс tr к input коробка. Я не являюсь экспертом в jQuery, и поэтому есть вероятность, что это может быть достигнуто более простым способом.
function numberRows(){
$("#tb2 tr").each(function(){
$(this).find("td:first-child input").val($("#tb2 tr").index(this));
});
}
Как указал Броди в комментариях, вы можете изменить input от чтения только до скрытого ввода, но я бы оставил это вам. Я использовал окно только для чтения, чтобы наглядно показать значение.
Другие решения
Мне очень нравится ответ @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 {
}
});
});
Было бы лучше поместить его в функцию или даже (как предложили другие пользователи) сделать небольшую обратную передачу на сервер и позволить серверу создать строку в вашей базе данных и вернуть вам серийный номер. Затем, когда вы публикуете, у вас есть серийный номер, который вы можете использовать для определения строки для обновления.