前端动态创建表格并获取表格的所有内容为数组

最新推荐文章于 2024-06-15 21:15:02 发布

LegHair

最新推荐文章于 2024-06-15 21:15:02 发布

阅读量1.9k

点赞数

本文链接：https://blog.csdn.net/LegHair/article/details/82690047

版权

<!--动态创建表格并添加内容-->
<!--添加内容后的表格最后以数组的方式传给后台-->
<!--Demo如下-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style>
        tr{text-align: center;}
    </style>
</head>
<body>

<form id="form1" method="post" style="text-align:center">
    <option>添加产品</option><br />
    <br />
    名称：<input type="text" id="name" value="" />
    数量:<input type="text" id="num" value="" />
    单位:<input type="text" id="spec" value="" />
    <br />
    <br />
    <br />
    <input type="button" value="添加" id="btn1" />
    <input type="button" value="保存" id="btn2" />
</form>

<br />
<br />
<hr color="black" /><br />
<br />

<table width="600" border="1" align="center" id="table1">
    <thead>
    <tr>
        <td>名称</td>
        <td>数量</td>
        <td>单位</td>
        <td>操作</td>
    </tr>
    </thead>
    <tbody></tbody>
</table>
</body>
</html>



<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<script>
        var arr=[];

        //添加药品
        $("#btn1").click(function (){
            if($("#name").val()=="" ||$("#num").val()=="" || $("#spec").val()=="" ){
                alert('添加药品钧不能为空！');
                return false
            }else{}
            var $tr=$("<tr></tr>");
            var $bt=$("<td><a>删除</a></td>");
            var $li1="<td>"+$("#name").val()+"</td>";
            var $li2="<td>"+$("#num").val()+"</td>";
            var $li3="<td>"+$("#spec").val()+"</td>";
            $tr.append($li1,$li2,$li3,$bt);
            //将获取的tr 追加到 table中
            $('#table1 tbody').append($tr);

            //获取 a 连接的属性
            $("a").attr("href","javascript:void(0)");
            //删除
            $("a").click(function(){
                //定义p1 存储 td
                var p1=this.parentNode;
                //定义p2  存储 tr
                var p2=p1.parentNode;
                //移除 tr
                $(p2).remove();
                arr=[]
            });
        });

        //保存处方
        $("#btn2").click(function(){

            for(var m=0;m < ($("tbody").find('tr').length);m++){
                var s={
                    name:$("tbody").find('tr').eq(m).find('td').eq(0).text(),
                    num:$("tbody").find('tr').eq(m).find('td').eq(1).text(),
                    danwei:$("tbody").find('tr').eq(m).find('td').eq(2).text()
                };
              arr[m]=s
           }

           if(arr.length<=0){
                alert('请先添加产品！')
                return false
           }
           //打印看保存的产品信息
            console.log(arr);
        })

</script>

LegHair

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
前端动态创建表格并获取表格的所有内容为数组

&lt;!--动态创建表格并添加内容--&gt;&lt;!--添加内容后的表格最后以数组的方式传给后台--&gt;&lt;!--Demo如下--&gt;&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta http-equiv="Content-Type" conte
复制链接

扫一扫