У меня есть большая таблица входов, и по событию щелчка мне нужно извлечь входные значения каждой строки, чтобы отправить их на сервер.
Мне нужно спросить, есть ли лучший способ сделать это чтобы предотвратить все это жесткое кодирование. Мой нижеприведенный код работает как-то, но я не проверял, имеет ли ввод тип radio, поэтому мне нужно написать больше кода для его завершения.
Я не уверен, что все в порядке или вы можете поделиться лучший способ в этом.
Вот что я делаю ниже:
- Итерация по каждой строке таблицы и назначение каждого идентификатора строки для объекта в качестве ключа.
- Итерация по этому объекту для получения входных значений каждой строки
- Сохранение ввода в объект в виде значений, разделенных
_, для разделения на массив
Live Demo
<!DOCTYPE html>
<html>
<body>
<table>
<tbody id="dynamic_form_tbody">
<tr id="123">
<td><input type="text"></td>
<td><input type="date"></td>
<td><input type="radio" name="choice" value="yes"> <input type="radio" name="choice" value="no"></td>
</tr>
<tr id="1256">
<td><input type="text"></td>
<td><input type="date"></td>
<td><input type="radio" name="choice" value="yes"> <input type="radio" name="choice" value="no"></td> </tr>
<tr id="1212">
<td><input type="text"></td>
<td><input type="date"></td>
<td><input type="radio" name="choice" value="yes"> <input type="radio" name="choice" value="no"></td> </tr>
</tbody>
</table>
<input type="button" id="log" value="console.log data">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(() => {
var $btn = $('#log')
$btn.click(e => {
var table_tbody = $('#dynamic_form_tbody')
var dynamic_form_data = {}
//collect each row's id
table_tbody.find("tr").each(function (e) {
console.log('tr found with id: ' + $(this).attr('id'))
id = $(this).attr('id')
dynamic_form_data[id] = ""
})
for (let id in dynamic_form_data) {
$(`tr#${id} input`).each(function (e) {
let $this_val = $(this).val() || null
dynamic_form_data[id] += [$this_val + '_']
})
}
console.log(dynamic_form_data)
})
})
</script>
</body>
</html>