使用Javascript/jquery如何从选定行中的每个单元格中获取值
我试图弄清楚如何获取行中的每个单元格值并将其分配给变量,尤其是复选框值 下面是该表的一个示例使用Javascript/jquery如何从选定行中的每个单元格中获取值,javascript,jquery,Javascript,Jquery,我试图弄清楚如何获取行中的每个单元格值并将其分配给变量,尤其是复选框值 下面是该表的一个示例 <table id="mytable" class="table"> <thead> <b><tr><th>Header1</th><th>Header2</th><th>Header2</th><th>Header3</th></
<table id="mytable" class="table">
<thead>
<b><tr><th>Header1</th><th>Header2</th><th>Header2</th><th>Header3</th></tr></b>
</thead>
<tr>
<td>value1</td>
<td>value1</td>
<td>
<label><input id="divpriority" ng-model="priority" type="checkbox" /> Option1</label>
<label><input id="divsource" type="checkbox" /> Option2</label>
<label> <input type="checkbox" checked/>Otion3</label>
</td>
<td><br/><br/><button id="buttonvalues" type="button" class="btn-primary">GetValues</button></td>
</tr>
</table>
使用Javascript/jquery,我如何从选定行中的每个单元格中获取值,并通过单击行中包含的按钮将值分配给变量
请强调将标签名称从复选框分配到数组变量中。我想获取签入数组的复选框的名称我想您希望在单击某行时获取该行的值。如果是这种情况,那么您的选择器可以是:$mytable.onclick、.btn primary、。。。。并获取复选框的值:var priority=$this.closest'tr.findinput.eq0.val
我建议将类放在每行的复选框中,这样您就可以根据该类进行选择,而不是依赖于HTML结构始终与using.eq0相同。您当前使用的ID不是特别有效的,因为它们在DOM中应该是唯一的。ID必须是唯一的,您应该使用类,假设您已将ID更改为可以使用的类。返回数组的map方法:
$("#mytable").on("click", ".buttonvalues", function() {
var options = $(this).closest('tr')
.find('input[type=checkbox]:checked')
.map(function() {
return $.trim( $(this).parent().text() );
}).get();
});
请注意,$mytable table不会选择具有mytable ID属性的表。它选择mytable元素的子表 试试这个:
如果要保存行中的每个单元格值,可以使用类似的方法 代码: 结果:
[
{
"name": "Header1",
"value": "value1"
},
{
"name": "Header2",
"value": "value1"
},
{
"name": "Header3",
"value": {
"Option1": false,
"Option2": false,
"Option3": true
}
},
{
"name": "Header4",
"value": "GetValues"
}
]
要获取数组中每个选中选项的名称,请将标头循环更改为:
$header.each(function(idx,hdr) {
var $curCol = $cols.eq(idx);
var $labels = $curCol.find('label');
var value;
if($labels.length) {
// Filters for labels containing a checked checkbox
value = $labels.filter(function(lblIdx) {
return $(this).find('input').is(':checked');
}).map(function(valIdx, valLbl) { // Maps the result to the text value of the label
return $(valLbl).text().trim();
}).get(); // returns just the array of values
} else {
value = $curCol.text().trim();
}
values.push( { name: $(hdr).text(), value: value } );
});
输出:
但是复选框没有名称属性,您是指标签的文本内容吗?而且ID必须是唯一的。这是正确的。标签文本\快速注释:缺少htmltbody@thtsigma这是几乎所有浏览器都会为您添加的一个元素。如果从HTML中省略,它仍然会显示在DOM中。这有点像你不必使用结束标记。有趣!谢谢@Jasper我不知道。这太棒了。我不想从选项中得到true或false,而是想得到标签的名称作为数组。Like value:{Option1,Option2,Option3}@Milligran我添加了一个基于所检查内容返回标签值数组的示例。
$("#mytable").on("click", ".btn-primary", function () {
var values = [];
var $header = $(this).closest('table').find('thead th');
var $cols = $(this).closest('tr').find('td');
$header.each(function(idx,hdr) {
var $curCol = $cols.eq(idx);
var $labels = $curCol.find('label');
var value;
if($labels.length) {
value = {};
$labels.each(function(lblIdx, lbl) {
value[$(lbl).text().trim()] = $(lbl).find('input').is(':checked');
});
} else {
value = $curCol.text().trim();
}
values.push( { name: $(hdr).text(), value: value } );
});
console.log(JSON.stringify(values, null, 2));
});
[
{
"name": "Header1",
"value": "value1"
},
{
"name": "Header2",
"value": "value1"
},
{
"name": "Header3",
"value": {
"Option1": false,
"Option2": false,
"Option3": true
}
},
{
"name": "Header4",
"value": "GetValues"
}
]
$header.each(function(idx,hdr) {
var $curCol = $cols.eq(idx);
var $labels = $curCol.find('label');
var value;
if($labels.length) {
// Filters for labels containing a checked checkbox
value = $labels.filter(function(lblIdx) {
return $(this).find('input').is(':checked');
}).map(function(valIdx, valLbl) { // Maps the result to the text value of the label
return $(valLbl).text().trim();
}).get(); // returns just the array of values
} else {
value = $curCol.text().trim();
}
values.push( { name: $(hdr).text(), value: value } );
});
[
{
"name": "Header1",
"value": "value1"
},
{
"name": "Header2",
"value": "value1"
},
{
"name": "Header3",
"value": [
"Option1",
"Option3"
]
},
{
"name": "Header4",
"value": "GetValues"
}
]