"При выполнении вышеуказанного кода я обнаружил, что введенное значениев 3-й или 4-й строке задано пустое значение, даже если в той же строке есть ввод от пользователя. Я даже пытался получить доступ к значению на странице с помощью консольного отладчика, но значение установлено как пустое. "
Ситуация
- Допустим, у вас есть 6 строк.
- Пользователь скрывает первые 3 строки.
- Требуется значениевходов в оставшиеся 3 строки.
Использование OP ( O RIGINAL P ost ) ✱ код:
var visibleIndex = $('#domaintable tr:visible').length-1;
Это индекс 2 для цикла, который должен охватывать 3 цикла, это логично.
var names = $(`[name="domainName"]`);
Далее идет объект jQuery все теги с name из domainName.Это 6 входных данных видимых и скрытых , потому что jQuery Collection (или Object) считает все.Теперь, пройдя через цикл, вы получите значения 3 скрытых входов, и после этого он остановится.
✱ Имена были изменены для моего здравомыслия - domainthis и domainthat начинают выглядеть просто как domain.
Решения
Быстрое решение заключается в изменении строки 2:
var names = $(`[name="domainName:visible"]`);
Следующая демонстрационная программа имеет универсальную функцию для простого повторного использования, она использует .each() метод, который превосходит цикл for, детали прокомментированы в демонстрационной версии.Кроме того, разметка является хорошим примером правильного форматирования HTML.Кроме того, id="checkDomain" недопустимо - все идентификаторы должны быть уникальными - поэтому оно было изменено на class="checkDomain".Как только вы привыкнете к использованию jQuery, использование класса становится очень простым, а использование id становится помехой.
Демо
/* | Row | Pick one for ROW parameter */
// Results will be different
var vis = `#domains tbody tr:visible`;
var inv = `#domains tbody tr:hidden`;
var all = `#domains tbody tr`;
/* | jQuery Object | Pick one for jQObj parameter */
// They are different ways to access the same input
var name = '[name="domainName"]';
var data = '[data-domain]';
var type = ':text';
// Keep track of lines logged with a counter
var counter = 1;
/* Pass in a selector for rows and input */
function trLoop(ROW, jQObj) {
// Log a line and increment counter
console.log(`${counter++} ================`);
// .each() runs a function on each row
$(ROW).each(function() {
/* Get the current row ---- $(this)
** Find the text input ---- .find(jQObj)
** Get that input's value - .val()
*/
var result = $(this).find(jQObj).val();
// If there's no value log: "Blank"...
if (!result) {
console.log('Blank');
// ...otherwise log the value
} else {
console.log(result);
}
});
// Log a line after the last loop
console.log(`==================`);
}
/* For demo purposes */
$('#add').on('click', function(e) {
var count = Number($('[data-row]:last').data('row'))+1;
$('#domains tbody').append(`<tr id="row${count}" class='show'>
<td><input class="domainCheck" data-row="${count}" type="checkbox"></td>
<td>${count}</td>
<td><input data-domain="${count}" name="domainName" type="text" value=''></td>
<td><button type='button'>Hide</button></td>
</tr>`);
});
/* For demo purposes */
$('#domains tbody').on('click', 'button', function(e) {
$(this).closest('tr').hide();
});
/* For demo purposes */
$(':radio:eq(0)').on('click', function(e) {trLoop(vis, name)});
$(':radio:eq(1)').on('click', function(e) {trLoop(inv, data)});
$(':radio:eq(2)').on('click', function(e) {trLoop(all, type)});
/* All styles are for demo purposes*/
body {
font: 400 16px Consolas
}
fieldset {
width: 20%;
float:left;
}
#domains {
width: 25%;
margin: 0 10px;
float:left;
}
label {
display: inline-block;
width: 10ch;
}
input, button {
display: inline-block;
line-height: 25px;
height: 25px;
vertical-align: middle;
text-align:center;
font: inherit;
}
button {
width: 8ch;
}
.as-console-wrapper.as-console-wrapper {
width: 25%;
min-height: 100%;
transform:translateX(300%);
}
.as-console-row.as-console-row::after {
content:'';
padding:0;
margin:0;
border:0;
width:0;
}
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title></title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet">
<style></style>
</head>
<body>
<!--fieldset for demo purposes-->
<fieldset>
<legend>Rows</legend>
<label>Visible: </label>
<input type='radio' name='row'><br>
<label>Invisible: </label>
<input type='radio' name='row'><br>
<label>All: </label>
<input type='radio' name='row'>
</fieldset>
<table id='domains'>
<thead>
<tr>
<th scope="col"></th>
<th scope="col"></th>
<th scope="col">Domain Name</th>
<th scope='col'>
<button id='add' type='button'>Add</button>
</th>
</tr>
</thead>
<tbody>
<tr id="row1">
<td><input class="domainCheck" data-row="1" type="checkbox" checked></td>
<td>1</td>
<td><input data-domain="1" name="domainName" type="text" value='cdnjs.com'></td>
<td><button type='button'>Hide</button></td>
</tr>
<tr id="row2">
<td><input class="domainCheck" data-row="2" type="checkbox" checked></td>
<td>2</td>
<td><input data-domain="2" name="domainName" type="text" value='stackoverflow.com'></td>
<td><button type='button'>Hide</button></td>
</tr>
<tr id="row3">
<td><input class="domainCheck" data-row="3" type="checkbox"></td>
<td>3</td>
<td><input data-domain="3" name="domainName" type="text" value=''></td>
<td><button type='button'>Hide</button></td>
</tr>
<tr id="row4">
<td><input class="domainCheck" data-row="4" type="checkbox"></td>
<td>4</td>
<td><input data-domain="4" name="domainName" type="text" value=''></td>
<td><button type='button'>Hide</button></td>
</tr>
<tr id="row5">
<td><input class="domainCheck" data-row="5" type="checkbox" checked></td>
<td>5</td>
<td><input data-domain="5" name="domainName" type="text" value='google.com'></td>
<td><button type='button'>Hide</button></td>
</tr>
</tbody>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>
</html>