如何获取table表格中的数据
程序员文章站
2022-04-19 19:36:49
...
如图:想要将表中的数据拿出来
html代码
<div class="saveTable">
<table class="table table-dashed-line">
<thead>
<tr>
<th style="display:none">id</th>
<th>日限额(元)</th>
<th>星期</th>
<th>时间</th>
<th>终止时间</th>
<th>启动状态</th>
<th>操作</th>
</tr>
</thead>
<tbody id="day">
<tr>
<td align="center" style="display:none"><input id="id0" name="id0" style="width:70px"></td>
<td align="center" style="width:97px"><input id="dayValue0" name="dayValue0" style="width:70px"></td>
<td align="left" style="width:349px">
<div class="input-checkbox" style="width:80px">
<input type="checkbox" name="dayWeek0" value="1">
<span>星期一</span>
</div>
<div class="input-checkbox" style="width:80px">
<input type="checkbox" name="dayWeek0" value="2">
<span>星期二</span>
</div>
<div class="input-checkbox" style="width:80px">
<input type="checkbox" name="dayWeek0" value="3">
<span>星期三</span>
</div>
<div class="input-checkbox" style="width:80px">
<input type="checkbox" name="dayWeek0" value="4">
<span>星期四</span>
</div>
<br/>
<div class="input-checkbox" style="width:80px">
<input type="checkbox" name="dayWeek0" value="5">
<span>星期五</span>
</div>
<div class="input-checkbox" style="width:80px">
<input type="checkbox" name="dayWeek0" value="6">
<span>星期六</span>
</div>
<div class="input-checkbox" style="width:80px">
<input type="checkbox" name="dayWeek0" value="7">
<span>星期日</span>
</div>
</td>
<td align="center" style="width:140px">
<select style="width:100px;" id="time0" name="time0">
<option value='' >选择时间</option>
</select>
</td>
<td align="center" style="width:140px">
<input id="endTime0" name="endTime0" onFocus="ws.tools.date({dateFmt:'yyyy-MM-dd HH:mm:ss'})">
</td>
<td align="center" style="width:180px">
<div class="input-radio" style="width:60px">
<input type="radio" name="switch0" value="1" checked>
<span>开启</span>
</div>
<div class="input-radio" style="width:60px">
<input type="radio" name="switch0" value="2">
<span>暂停</span>
</div>
</td>
<td align="center">
<a onclick="addDay()" style="cursor:pointer"><i class="glyphicon glyphicon-plus ico-main" aria-hidden="true" style="right: 20px;"></i></a>
<a onclick="removeDay(this)" style="cursor:pointer"><i class="glyphicon glyphicon-trash ico-danger" aria-hidden="true"></i></a>
</td>
</tr>
</tbody>
</table>
</div>
js代码
getDayValues : function(){
var tableValues = [];
var table=document.getElementById("day");
var rows=table.rows;
for(var i=0;i<rows.length;i++) {
var rowobj = {};
for(var j=0;j<rows[i].cells.length-1;j++) {
if($(rows[0].cells[j]).find('input').attr('name')){
if($(rows[0].cells[j]).find('input').attr('name').indexOf('dayWeek')!=-1){
var id_array=new Array();
$('input[name="dayWeek'+i+'"]:checked').each(function(){
id_array.push($(this).val());
});
var idstr=id_array.join(',');
rowobj['dayWeek'] = idstr;
}else if($(rows[0].cells[j]).find('input').attr('name').indexOf('switch')!=-1){
var val = $('input[name="switch'+i+'"]:checked').val();
rowobj['switch'] = val;
}else if($(rows[0].cells[j]).find('input').attr('name').indexOf('dayValue')!=-1){
rowobj['dayValue'] = $(rows[i].cells[j]).find('input').val();
}else if($(rows[0].cells[j]).find('input').attr('name').indexOf('id')!=-1){
rowobj['id'] = $(rows[i].cells[j]).find('input').val();
}else{
rowobj['endTime'] = $(rows[i].cells[j]).find('input').val();
}
}else{
var val = $("#time"+i).find("option:checked").text();
rowobj['time'] = val;
}
}
rowobj['name'] = $('#id').val();
tableValues.push(rowobj);
}
return tableValues;
},
主要是通过rows 和 cells 实现
上一篇: vue tabs编辑 初学者教学帖