前端将表格每行的值都追加到一个列表中

如图首先我们想要点击保存按钮时获得每行的数据（涉及到点击事件）–>循环每行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); }