如图首先我们想要点击保存按钮时获得每行的数据(涉及到点击事件)–>循环每行tr的数据–>拼接成一个长字符串(这么说,长得像json的字符串)–>追加到列表中
对应HTML代码如下:
<table class="layui-table" style="table-layout:fixed">
<colgroup>
<col width="7%">
<col width="9%">
<col width="10%">
<col width="9%">
<col width="9%">
<col width="10%">
<col width="10%">
<col width="10%">
<col width="16%">
<col width="10%">
</colgroup>
<thead>
<tr>
<th>地址</th>
<th>上一分站</th>
<th>距离</th>
<th>分站IP</th>
<th>分站名称</th>
<th>分站属性</th>
<th>所在区域</th>
<th>天线数量</th>
<th>坐标</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td class="dz">
<center>
<select name="city" lay-verify="" style="text-align: center">
<option value="010">1</option>
<option value="021">2</option>
<option value="0571" selected>3</option>
</select>
</center>
</td>
<td class="syfz">
<center>
<select name="city" lay-verify="" style="text-align: center">
<option value="010">1</option>
<option value="021">2</option>
<option value="0571" selected>3</option>
</select>
</center>
</td>
<td class="jl"><input value="测试15" style="outline:none;width:50px"></td>
<td class="ip"><input value="127.0.0.1" style="outline:none;width:50px"></td>
<td class="fzmc"><input value="测试15" style="outline:none;width:50px;"></td>
<td class="fzsx">
<select name="city" lay-verify="" style="text-align: center">
<option value="010">普通分站</option>
<option value="021">井口分站</option>
<option value="0571" selected>虚拟分站</option>
</select>
</td>
<td class="szqy">
<select name="city" lay-verify="">
<option value="010">6435区域</option>
<option value="021">6254区域</option>
<option value="0571" selected>2345区域</option>
</select>
</td>
<td class="txsl">
<center>
<select name="city" lay-verify="">
<option value="021">1</option>
<option value="0571">2</option>
</select>
</center>
</td>
<td class="zb">200.000, 235.78,5667.000</td>
<td style="text-align: center">
<a class="layui-btn layui-btn-xs wz-btn" lay-event="edit">位置</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</td>
</tr>
js代码:
var alljson = [];
var aj_st = 0;
$('#save').click(function() {
var len = $('tr').length; //表格tr数量
alljson=[];
for(var i=1;i<len;i++){
var dz = $($('tr')[i]).find('.txsl').find('option:selected').text(); // 地址
var syfz = $($('tr')[i]).find('.syfz').find('option:selected').text(); // 分站属性
var fzip = $($('tr')[i]).find('.ip').find('input').val(); // 分站IP
var fzmc = $($('tr')[i]).find('.fzmc').find('input').val(); // 分站名称
var fzsx = $($('tr')[i]).find('.fzsx').find('option:selected').text(); // 分站属性
var szqy = $($('tr')[i]).find('.szqy').find('option:selected').text(); // 所在区域
var txsl = $($('tr')[i]).find('.txsl').find('option:selected').text(); // 天线数量
var zb = $($('tr')[i]).find('.zb').text(); // 坐标
// 将所有值写入一个json
var tr_json = '{'+'"dz":'+'"'+dz+'"'+','+'"syfz":'+'"'+syfz+'"'+','+'"fzip":'+'"'+fzip+'"'+','+'"fzmc":'+'"'+fzmc+'"'+','+'"fzsx":'+'"'+fzsx+'"'+','
+'"szqy":'+'"'+szqy+'"'+','+'"txsl":'+'"'+txsl+'"'+','+'"zb":'+'"'+zb+'"'+'}';
// 将json写入列表alljson中
alljson.push(tr_json);
}