1、第一步:新建一个简单的页面,页面上有table数据,代码如下:<table clas衡痕贤伎s="layui-table"> <tr> <th>昵称</th> <th>加入时间</th> <th>签名</th> </tr> </thead> <tbody> <tr> <td id="x1">xx</td> <td id="x2">2016-11-29</td> <td id="x3">人生就像是一场修行</td> </tr> </tbody></table>
2、第二步:页面上添加保存保存按钮,并写上点击事件,代码如下:<button class="layui-btn" lay-submit="" id="demo1" lay-filter="demo1">保存</button>$('#demo1').click(function (d) { let data = { }})
3、第三步:获取table里面的数据,代码如下:x1: $('#x1').html(),x2: $('#x2').html(),x3: $('#x3').html()
4、第四步:使用ajax进行数据保存,代码如下:$.post('url', data, function (result) { console.log(result)})
5、第五步:运行上面的代码,可以看到数据已经请求到接口了,如图:
6、第六步:全部代码如下:<body><div class="la鲻戟缒男yui-container"> <table class="layui-table"> <tr> <th>昵称</th> <th>加入时间</th> <th>签名</th> </tr> </thead> <tbody> <tr> <td id="x1">xx</td> <td id="x2">2016-11-29</td> <td id="x3">人生就像是一场修行</td> </tr> </tbody> </table> <button class="layui-btn" lay-submit="" id="demo1" lay-filter="demo1">保存</button></div><script src="../../lib/layui-v2.5.4/layui.js?v=1.0.4" charset="utf-8"></script><script> layui.use(['element', 'jquery'], function () { let element = layui.element, $ = layui.jquery; $('#demo1').click(function (d) { let data = { x1: $('#x1').html(), x2: $('#x2').html(), x3: $('#x3').html() } $.post('url', data, function (result) { console.log(result) }) }) });</script></body>