jquery获取动态table列表的值并组装成数组返回

最新推荐文章于 2023-03-25 12:31:44 发布

奔腾的海水

最新推荐文章于 2023-03-25 12:31:44 发布

阅读量1.7k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： jquery 文章标签： table列表值获取

本文链接：https://blog.youkuaiyun.com/qq_29988051/article/details/87486642

jquery 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何利用jQuery从动态生成的table中获取单元格的值，并将其组织成数组形式进行处理和返回。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果如下

代码如下（后续完善加载动态table列表）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-1.8.3.js"></script>
</head>
<body>
<table id="mytable" bgcolor="aqua" border="1" align="center"
       style="top:20%;left:40%;position: absolute;width: 400px;height: 300px;">
    <tr>
        <td>姓名</td>
        <td>是否男性</td>
    </tr>
    <tr>
        <td>
            <input id="col1" name="work" value="刘德华" style="height: 100%;width: 100%;"/>
        </td>
        <td>
            <input type="radio" name="btn1" value="是">是
            <input type="radio" name="btn1" value="否">否
        </td>
    </tr>
    <tr>
        <td>
            <input id="col2" name="work" value="林志玲" style="height: 100%;width: 100%;"/>
        </td>
        <td>
            <input type="radio" name="btn2" value="是">是
            <input type="radio" name="btn2" value="否">否
        </td>
    </tr>
    <tr>
        <td>
            <input id="col3" name="work" value="张飞" style="height: 100%;width: 100%;"/>
        </td>
        <td>
            <input type="radio" name="btn3" value="是">是
            <input type="radio" name="btn3" value="否">否
        </td>
    </tr>
    <tr>
        <td>
            <input id="col4" name="work" value="刘备" style="height: 100%;width: 100%;"/>
        </td>
        <td>
            <input type="radio" name="btn4" value="是">是
            <input type="radio" name="btn4" value="否">否
        </td>
    </tr>
</table>
<button onclick="onSubmit()" style="margin-left:50%;margin-top: 30%;width: 70px;height: 50px;">提交</button>
<script type="text/javascript">
    function onSubmit() {
        var ras3 = [];
        var srTempNo, isMan;
        var rows = document.getElementById("mytable").rows;
        for (var i = 1; i < rows.length; i++) {
            srTempNo = $("#col" + i).val();
            isMan = $("input[name='btn" + i + "']:checked").val();
            ras3.push({srTempNo: srTempNo, isMan: isMan});
        }
        alert("提交成功" + ":" + JSON.stringify(ras3));
    }
</script>
</body>
</html>