[英]Using Javascript/jquery how can I get values from each cells in a selected row
我正在尝试找出如何获取并将行中的每个单元格值分配给变量。特别是复选框值
这是表格的一个例子
<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>
因此,在当前行中单击“ GetValues”按钮时,来自每个单元格的值将分配给一个变量。
我在想一些类似的事情:(我知道这很可能是错误的)
$("#mytable table tbody ").on("click", "#buttonvalues", function() {
var header1;
var header2;
var Options = new Array()
var header1 = $(this).closest('tr').header1.val ;
var header2 = $(this).closest('tr').header2.val
Options = //Not sure what to do here
使用Javascript / jquery如何从所选行中的每个单元格中获取值,并通过单击行中包含的按钮将值分配给变量。
请强调将复选框中的标签名称分配给数组变量。 我想获取已签入数组的复选框的名称
如果你想保存行中的每个单元格值,这样的东西就可以了。
码:
$("#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"
}
]
我想你在点击行时想要获取一行的值。 如果是这种情况,那么您的选择器可以是: $("#mytable").on("click", ".btn-primary", ...
并获取复选框的值: var priority = $(this).closest('tr').find("input").eq(0).val();
我建议在每行的复选框上放置类,以便您可以通过该类选择,而不是依赖于HTML结构始终使用.eq(0)
。 您当前使用的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
元素的后代表。
试试这个: http : //jsbin.com/oREJEKo/1/edit
$('#mytable').on('click', 'button', function() {
var checkboxes = $($(this)).closest('tr').find('input[type="checkbox"]');
var myvalues = [];
$(checkboxes).each(function() {
if ( $(this).is(':checked') ) {
myvalues.push( $(this).closest('label').text() );
}
});
console.log(myvalues);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.