Jquery table内容转为Json

恰饭广告

注意：如果table内有input最好转换为使用h5的contenteditable属性，否则表格内的input值无法转为json

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://www.idaobin.com/js/jquery-3.2.1.js"></script>
    <script src="https://www.idaobin.com/js/jquery.tabletojson.js"></script>
    <script>
        $(document).ready(function () {
            $('#dv1').focus(); //获取焦点
            $('#toJson').click(function () {
                var table = $('#tables').tableToJSON();
                var json=JSON.stringify(table);
                $("#tables tr:last").find("td").eq(4).children().focus(); //获取最后一行焦点
                alert(json);
            });
        });
    </script>
    <style>
        html,
        body {
            width: 99%;
            height: 99%;
            font-family: "微软雅黑";
            font-size: 12px;
        }

        #tables {
            width: 100%;
            text-align: center;
            border: 1px #000 solid;
            border-collapse: collapse;
        }

        #tables th,
        #tables td {
            border: 1px solid #000000;
        }

        #tables th {
            font-size: 14px;
            font-weight: bolder;
        }
    </style>
</head>

<body>
    <input type="button" id="toJson" value="tableToJson">
    <table id="tables">
        <thead>
            <tr>
                <td>姓名</td>
                <td>性别</td>
                <td>年龄</td>
                <td>地址</td>
                <td>输入</td>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td>男</td>
                <td>34</td>
                <td>湖北省武汉市</td>
                <td><div id="dv1" contenteditable="true">0</div></td> <!-- 可编辑的div -->
            </tr>
            <tr>
                <td>张三</td>
                <td>男</td>
                <td>34</td>
                <td>湖北省武汉市</td>
                <td><div contenteditable="true">0</div></td>
            </tr>
        </tbody>
    </table>
    
</body>

</html>

官方地址：https://www.github.developerdan.com/table-to-json/

原文链接：https://www.idaobin.com/archives/1971.html

让我恰个饭吧.ヘ(￣ω￣ヘ)

支付宝 ——————- 微信