我有以下表格定义：
<table id = "domaintable">
<thead>
<tr>
<th scope="col"> </th>
<th scope="col"> </th>
<th scope="col">Domain Name</th>
</thead>
</tr>
<tr id = "row1">
<td id =><input type = "checkbox" id = "domaincheck" data-domain-row="1" ></td>
<td align = "center" id = "domainID:1">1</td>
<td align = "center" id = "domainname1"><input type = "text" name ="domainname" data-domainname-row= "1"></td>
</tr>
<tr id = "row2" style="display:none;">
<td id =><input type = "checkbox" id = "domaincheck" data-domain-row="2" ></td>
<td align = "center" id = "domainID:2">2</td>
<td align = "center" id = "domainname2"><input type = "text" name ="domainname" data-domainname-row= "2"></td>
</tr>
<tr id = "row3" style="display:none;">
<td id =><input type = "checkbox" id = "domaincheck" data-domain-row="3" ></td>
<td align = "center" id = "domainID:3">3</td>
<td align = "center" id = "domainname3"><input type = "text" name ="domainname" data-domainname-row= "3"></td>
</tr>
<tr id = "row3" style="display:none;">
<td id =><input type = "checkbox" id = "domaincheck" data-domain-row="3" ></td>
<td align = "center" id = "domainID:3">3</td>
<td align = "center" id = "domainname3"><input type = "text" name ="domainname" data-domainname-row= "3"></td>
</tr>
<tr id = "row4" style="display:none;">
<td id =><input type = "checkbox" id = "domaincheck" data-domain-row="4" ></td>
<td align = "center" id = "domainID:4">4</td>
<td align = "center" id = "domainname4"><input type = "text" name ="domainname" data-domainname-row= "4"></td>
</tr>
<tr id = "row5" style="display:none;">
<td id =><input type = "checkbox" id = "domaincheck" data-domain-row="5" ></td>
<td align = "center" id = "domainID:5">5</td>
<td align = "center" id = "domainname5"><input type = "text" name ="domainname" data-domainname-row= "5"></td>
</tr>
<tr id = "row6" style="display:none;">
<td id =><input type = "checkbox" id = "domaincheck" data-domain-row="6" ></td>
<td align = "center" id = "domainID:6">6</td>
<td align = "center" id = "domainname6"><input type = "text" name ="domainname" data-domainname-row= "6"></td>
</tr>
</table>
上表的样式设置为“ display：none”，因此，当并非一次显示所有行时，仅当用户单击“添加行”按钮即可正确设置可见性时，该按钮可以正常工作而不会出现任何问题 我正在使用以下代码来检索表中为每一行输入的值：
var domaincount = $('#domaintable tr:visible').length-1;
console.log(domaincount);
var domainnamehtml = $('[name = "domainname"]');
console.log(domainnamehtml);
var domainnametable = [];
for (var i=0;i<domaincount;i++){
console.log(domainnamehtml[i].value);
if(domainnamehtml[i].value)
domainnametable[i] = domainnamehtml[i].value;
else
domainnametable[i] = "blank";
}
执行上面的代码后，我发现即使在同一行上有用户输入，在第三行或第四行中输入的值也被设置为空白。我什至尝试使用控制台调试器访问页面上的值，但该值设置为空白。 需要帮助以了解我在这里做错了什么。
答案 0 :(得分：0)
:visible与jQuery Object (or Collection) “在执行上述代码时，我发现即使在同一行上有用户输入，在第三行或第四行中输入的值也被设置为空白。我什至尝试访问页面上的值使用控制台调试器，但该值设置为空白。“
使用OP（ O 原始 P ost ）✱代码：
var visibleIndex = $('#domaintable tr:visible').length-1;
这是循环的索引2，应该涵盖3个循环，这是合乎逻辑的。
var names = $(`[name="domainName"]`);
接下来是 所有标记 的jQuery对象，其中name为domainName。这是 6个可见和隐藏的输入 ，因为jQuery集合（或对象）会计算所有内容。因此，现在遍历循环，您将获得3个隐藏输入的值，并在此之后停止。
✱我的名字已被修改，domainthis和domainthat开始看起来像domain。
一种快速的解决方法是更改第2行：
var names = $(`[name="domainName:visible"]`);
以下演示具有易于重用的通用功能，它使用优于for循环的.each()方法，演示中对细节进行了注释。同样，标记是正确HTML格式的一个很好的例子。另外，id="checkDomain"无效-所有ID必须唯一-因此已将其更改为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>