javascript学习碎片---js对表格数据修改、增加、删除，获取行列数据，打包为json数据包...-优快云博客

本文介绍了一种使用JavaScript操作HTML表格的方法，包括增加、删除表格行，以及如何将表格数据整理成JSON格式以便于进一步处理。该方法适用于动态更新表格内容的场景。

js对表格数据修改、增加、删除，获取行列数据，打包为json数据包

<!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].onchange=function(){TODO....};更合适
        */
        cell0.innerHTML="<input type='text' name='name' onchange='changeContent()'/>";
        cell1.innerHTML="<input type='text' name='no' onchange='changeContent()'/>";
        cell2.innerHTML="<input type='text' name='classname' onchange='changeContent()'/>";
        cell3.innerHTML="<input type='text' name='score' onchange='changeContent()'/>";
        cell4.innerHTML="<input type='text' name='sex' onchange='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" >
<table id="myTable" border="1" cellspacing="0">
<tr>
<td>姓名</td>
<td>学号</td>
<td>班级</td>
<td>成绩</td>
<td>性别</td>
</tr>
<tr>
<td><input type="text" name="name" value="zs" οnchange="changeContent()"/></td>
<td><input type="text" name="no" value="2251" οnchange="changeContent()"/></td>
<td><input type="text" name="classname" value="电子商务" οnchange="changeContent()"/></td>
<td><input type="text" name="score" value="93" οnchange="changeContent()"/></td>
<td><input type="text" name="sex" value="男" οnchange="changeContent()"/></td>
</tr>

</table>
<br/>

</body>

<script type="text/javascript">
//页面加载完后加载changeContent()函数，目的：是为了当页面加载完后，能及时的把表单中的数据传递到隐藏域中。
window.onload=changeContent();
  //内容有改动随时更新数据
  function changeContent(){
      //存放各个属性数组的数组
        var arrays = new Array();

        //存放name的数组
        var nameArray = new Array();
        var noArray = new Array();
        var classnameArray = new Array();
        var scoreArray = new Array();
        var sexArray  = new Array();

        //表格的列数
        var cellNums = document.getElementById("myTable").rows[0].cells.length;

        //表格的行数
        var rowNums = document.getElementById("myTable").rows.length;              

        //把所有的name值放到nameArray数组中
        for(var m=1;m<rowNums;m++){
            nameArray[m-1] = document.getElementById("myTable").rows[m].cells[0].getElementsByTagName("input")[0].value;
        }

        //把所有的no值放到noArray数组中
        for(var m=1;m<rowNums;m++){
            noArray[m-1] = document.getElementById("myTable").rows[m].cells[1].getElementsByTagName("input")[0].value;
        }

        //把所有的classname值放到classnameArray数组中
        for(var m=1;m<rowNums;m++){
            classnameArray[m-1] = document.getElementById("myTable").rows[m].cells[2].getElementsByTagName("input")[0].value;
        }

        //把所有的score值放到scoreArray数组中
        for(var m=1;m<rowNums;m++){
            scoreArray[m-1] = document.getElementById("myTable").rows[m].cells[3].getElementsByTagName("input")[0].value;
        }

        //把所有的sex值放到sexArray数组中
        for(var m=1;m<rowNums;m++){
            sexArray[m-1] = document.getElementById("myTable").rows[m].cells[4].getElementsByTagName("input")[0].value;
        }

        //将数组中的数据放到json对象中
        var data = [];
        for(var i=0;i<nameArray.length;i++){
            data.push({"name":nameArray[i],
                       "no":noArray[i],
                       "classname":classnameArray[i],
                       "score":scoreArray[i],
                       "sex":sexArray[i]});
            }
        //将json对象转为json字符串，前后台传递是以字符串的形式
        var strdata = JSON.stringify(data);
        //将strdata传递到html隐藏域中
        document.getElementById("hd1").value = strdata;
  }
</script>

</html>

转载于:https://blog.51cto.com/13238147/2051520