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

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


    }
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值