js实现表格的增删改，并获取表格中的数据传递到后台中。

最新推荐文章于 2023-02-18 17:30:01 发布

这只是个昵称

最新推荐文章于 2023-02-18 17:30:01 发布

阅读量1.4w

点赞数 2

分类专栏：前端文章标签：前端

本文链接：https://blog.csdn.net/chen2250/article/details/52172124

版权

本文介绍如何使用JavaScript实现HTML表格的动态增删改操作，并演示如何将表格数据转换为JSON格式，以便传递到后台。两种实现方式分别通过事件监听和动态设置表单名称来达到目标。

摘要由CSDN通过智能技术生成

前台代码：

方式一：

<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<head>
    <title>学生信息提交页面</title>

    <script>
        //增加行
       function insRow(){
           var rowNums = document.getElementById("myTable").rows.length;
           var irow = document.getElementById("myTable").insertRow(rowNums);
           var cell0 = irow.insertCell(0);
           var cell1 = irow.insertCell(1);
           var cell2 = irow.insertCell(2);
           var cell3 = irow.insertCell(3);
           var cell4 = irow.insertCell(4);

           /*
               在每个input标签中添加onchange事件，比
               document.getElementsByTagName("table")[0].οnchange=function(){TODO....};更合适
           */
           cell0.innerHTML="<input type='text' name='name' οnchange='changeContent()'/>";
           cell1.innerHTML="<input type='text' name='no' οnchange='changeContent()'/>";
           cell2.innerHTML="<input type='text' name='classname' οnchange='changeContent()'/>";
           cell3.innerHTML="<input type='text' name='score' οnchange='changeContent()'/>";
           cell4.innerHTML="<input type='text' name='sex' οnchange='changeContent()'/>";

       }

        //删除行
       function delRow(){
           var rowNums = document.getElementById("myTable").rows.length;
           var dRow = document.getElementById("myTable").deleteRow(rowNums-1);
       }

    </script>
</head>
<body>
      学生信息
<form action="handleStudentInfoSecond" method="post" name="studentForm" >
&

最低0.47元/天解锁文章

这只是个昵称

关注

2
点赞
踩
20

收藏

觉得还不错? 一键收藏
3
评论
js实现表格的增删改，并获取表格中的数据传递到后台中。

前台代码：方式一：学生信息提交页面 //增加行 function insRow(){ var rowNums = document.getElementById("myTable").rows.length; var irow =
复制链接

扫一扫

专栏目录