动态编辑表格的一行-CFANZ编程社区

在这里插入代码片<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<table width="70%"  border="1" bordercolor="#000000" align="center" id="table1">
    <thead>
    <tr>
        <td>姓名</td>
        <td>学号</td>
        <td>英语</td>
        <td>政治</td>
        <td>操作</td>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
    </tr>
    </tbody>
</table>
<form action="" method="get" style="margin:3em 15%;">
    姓名
    <input type="text" value="" size="20" name="name1" id="name1"/>
    学号
    <input type="text" value="" size="20" name="name2" id="name2"/>
    英语
    <input type="text" value="" size="20" name="name3" id="name3"/>
    政治
    <input type="text" value="" size="20" name="name4" id="name4"/>
    <input type="button" value="提交" id="tj" onclick="dosubmit()">
</form>
</body>
<script type="text/javascript">

    var name = '';
    var Sno = '';
    var english = 0;
    var politics = 0;
    function dosubmit(){
        var xm=document.getElementById("name1").value;
        var xh=document.getElementById("name2").value;
        var yy=document.getElementById("name3").value;
        var zz=document.getElementById("name4").value;

        row=document.getElementById("table1").insertRow(1);
        if(row!=null){
            cell=row.insertCell();
            cell.innerHTML=xm;
            cell=row.insertCell();
            cell.innerHTML=xh;
            cell=row.insertCell();
            cell.innerHTML=yy;
            cell=row.insertCell();
            cell.innerHTML=zz;
            //添加编辑按钮
            cell=row.insertCell();
            cell.innerHTML= '<a href="###" onclick="editRow(this)">编辑</a>';
        }
    }

    //编辑指定行内容
    function editRow(obj) {
        //获取包括要编辑内容的 tr元素
        var tr = obj.parentNode.parentNode;
        name = tr.children[0].innerHTML;
        Sno = tr.children[1].innerHTML;
        english = tr.children[2].innerHTML;
        politics = tr.children[3].innerHTML;
        // console.log(name + ',' + Sno + ',' + english + ',' + politics);
        tr.children[0].innerHTML ='<input type="text" value="' + name + '">';
        tr.children[1].innerHTML ='<input type="text" value="' + Sno + '">';
        tr.children[2].innerHTML ='<input type="text" value="' + english + '">';
        tr.children[3].innerHTML ='<input type="text" value="' + politics + '">';
        tr.children[4].innerHTML ='<a href="###" onclick="saveEdit(this)">确定</a> <a href="###" onclick="cancelEdit(this)">取消</a>';
    }

    //保存编辑内容
    function saveEdit(obj) {
        var tr = obj.parentNode.parentNode;
        tr.children[0].innerHTML = tr.children[0].children[0].value;
        tr.children[1].innerHTML = tr.children[1].children[0].value;
        tr.children[2].innerHTML = tr.children[2].children[0].value;
        tr.children[3].innerHTML = tr.children[3].children[0].value;
        tr.children[4].innerHTML = '<a href="###" onclick="editRow(this)">编辑</a>';
    }

    //取消编辑操作
    function cancelEdit(obj) {
        var tr = obj.parentNode.parentNode;
        tr.children[0].innerHTML = name;
        tr.children[1].innerHTML = Sno;
        tr.children[2].innerHTML = english;
        tr.children[3].innerHTML = politics;
        tr.children[4].innerHTML = '<a href="###" onclick="editRow(this)">编辑</a>';
    }
</script>
</html>
提交数据添加表格一行
点击编辑可以编辑该行的数据进行保存