我需要从一行中的特定表列获取信息。所有数据都应放入一个数组中。 我应该从不同的列(1、3、4)的每个选中的行中获取数据。列#4包含下拉选项,并且应该仅采用所选值。 我很难让此功能正常工作,如果我只有一列,则可以正常工作。当我从中检索数据时,我遇到了麻烦,它从选项值中检索所有数据,我应该只获得选定的值。
function getData() {
// Enumerate over each checked checkbox
$('input:checked').each(function() {
var row = [];
$(this).closest('tr').find('td:eq(5)').each(function() {
row.push($(this).text());
});
// Add this row to our list of rows
rows.push(row);
//debugger;
});
console.log(row);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<th>#</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Country</th>
</tr>
<tr>
<td><input type="checkbox" id="checkbox" value="1"></td>
<td>Jill</td>
<td>Smith</td>
<td>20</td>
<td>
<select id="country">
<option value='1'>Germany</option>
<option value='2'>England</option>
<option value='3'>Croatia</option>
<option value='4'>USA</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox" id="checkbox" value="2"></td>
<td>Eve</td>
<td>Jackson</td>
<td>14</td>
<td>
<select id="country">
<option value='1'>Germany</option>
<option value='2'>England</option>
<option value='3'>Croatia</option>
<option value='4'>USA</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox" id="checkbox" value="3"></td>
<td>Amanda</td>
<td>Jac</td>
<td>14</td>
<td>
<select id="country">
<option value='1'>Germany</option>
<option value='2'>England</option>
<option value='3'>Croatia</option>
<option value='4'>USA</option>
</select>
</td>
</tr>
</table>
<button type="button" onclick="getData()">Submit</button>
该功能仅显示一列中的数据。如果我添加.'td:eg(6)'我会得到一个空数组
答案 0 :(得分:3)
@Bruno,您的案子与众不同,为了获得理想的结果,我已更新了按钮单击事件的代码,如下所示。
$("#btnSubmit").click(function(){
var rows = [];
$('input:checked').each(function() {
var row = $(this).parent().parent();
var data = {};
$(row).find("td").each(function(i,obj){
if(i == 1){
data.name = $(this).text();
}
else if(i == 3){
data.age = $(this).text();
}
else if(i == 4){
data.country = $(this).find("select").val();
}
})
rows.push(data);
})
console.log(rows);
})
在将其实现为代码之前,您可以在JS Fiddle Demo的此处进行播放。
在小提琴演示打开控制台[F12]中,您可以在数组中查看所选行值的列表。
希望这就是您想要的。
答案 1 :(得分:2)
我在这里尝试您的结果来获取选择行dropdwun的值。
function getData(){
var rows=[];
// Enumerate over each checked checkbox
$('input:checked').each(function () {
var row = [];
var cnty= $(this).closest('tr').find('td:nth-child(5)').children('select').val();
var fname=$(this).closest('tr').find('td:nth-child(2)').text();
var lname=$(this).closest('tr').find('td:nth-child(3)').text();
var age=$(this).closest('tr').find('td:nth-child(4)').text();
var vals=[fname ,lname, age, cnty];
row.push(vals);
// Add this row to our list of rows
rows.push(row);
//debugger;
});
console.log(rows);
}
<table >
<tr>
<th>#</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Country</th>
</tr>
<tr>
<td><input type="checkbox" id="checkbox" value="1"></td>
<td>Jill</td>
<td>Smith</td>
<td>20</td>
<td>
<select id="country">
<option value='1'>Germany</option>
<option value='2'>England</option>
<option value='3'>Croatia</option>
<option value='4'>USA</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox" id="checkbox" value="2"></td>
<td>Eve</td>
<td>Jackson</td>
<td>14</td>
<td>
<select id="country">
<option value='1'>Germany</option>
<option value='2'>England</option>
<option value='3'>Croatia</option>
<option value='4'>USA</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox" id="checkbox" value="3"></td>
<td>Amanda</td>
<td>Jac</td>
<td>14</td>
<td>
<select id="country">
<option value='1'>Germany</option>
<option value='2'>England</option>
<option value='3'>Croatia</option>
<option value='4'>USA</option>
</select>
</td>
</tr>
</table>
<button type="button" onclick="getData()">Submit</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
答案 2 :(得分:0)
这里是单击按钮时如何获得所有选定值的方法。只需遍历所有tr
并在其中找到select
并获得value
即可。
function getData(){
$("tr").each(function() {
if($(this).find("select")){
console.log($(this).find("select").val())
}
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table >
<tr>
<th>#</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Country</th>
</tr>
<tr>
<td><input type="checkbox" id="checkbox" value="1"></td>
<td>Jill</td>
<td>Smith</td>
<td>20</td>
<td>
<select class="select-cls" id="country">
<option value='1'>Germany</option>
<option value='2'>England</option>
<option value='3'>Croatia</option>
<option value='4'>USA</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox" id="checkbox" value="2"></td>
<td>Eve</td>
<td>Jackson</td>
<td>14</td>
<td>
<select id="country">
<option value='1'>Germany</option>
<option value='2'>England</option>
<option value='3'>Croatia</option>
<option value='4'>USA</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox" id="checkbox" value="3"></td>
<td>Amanda</td>
<td>Jac</td>
<td>14</td>
<td>
<select id="country">
<option value='1'>Germany</option>
<option value='2'>England</option>
<option value='3'>Croatia</option>
<option value='4'>USA</option>
</select>
</td>
</tr>
</table>
<button type="button" onclick="getData()">Submit</button>