用html和javascript在这个基础上加每添加一行表格的同时，在表格每一行后边有一个编辑，编辑有一个超链接

点进去之后可以修改数据，应该加什么代码，求大神指点<!DOCTYPEhtml><html><head><metahttp-equiv="Content-Type"cont... 点进去之后可以修改数据，应该加什么代码，求大神指点
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
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;
var zf=parseFloat(yy)+parseFloat(zz);
var pjf=zf/2;
var lj=document.getElementById("bj");
document.getElementById("name5").value=+zf;
document.getElementById("name6").value=+pjf;
row=document.getElementById("table1").insertRow();
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;
}
return false;
}

</script>
</head>
<body>

<table width="500" border="1" bordercolor="#000000" align="center" id="table1">
<thead>
<tr>
<td>姓名</td>
<td>学号</td>
<td>英语</td>
<td>政治</td>

</tr>

</thead>
</table>
<form action="return dosubmit()" method="get">
姓名
<input type="text" value="" size="20" name="name1" id="name1"/><br/>
学号
<input type="text" value="" size="20" name="name2" id="name2"/><br/>
英语
<input type="text" value="" size="20" name="name3" id="name3"/><br/>
政治
<input type="text" value="" size="20" name="name4" id="name4"/><br/>
总分
<input type="text" value="" size="20" name="name5" id="name5"/><br/>
平均分
<input type="text" value="" size="20" name="name6" id="name6"/><br/>
<input type="submit" value="提交" id="tj" onclick="return dosubmit()">
</form>

</body>
</html> 展开

 我来答

1个回答

#热议# 在购买新能源车时，要注意哪些？

九头草鸡
推荐于2018-04-30 · TA获得超过239个赞

知道小有建树答主

回答量：259

采纳率：0%

帮助的人：172万

我也去答题访问个人页

关注

展开全部

修改了一下你的代码，实现了编辑功能

<!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>
    </table>
<form action="return dosubmit()" method="get" style="margin:3em 15%;">
    姓名
    <input type="text" value="" size="20" name="name1" id="name1"/><br/>
    学号
    <input type="text" value="" size="20" name="name2" id="name2"/><br/>
    英语
    <input type="text" value="" size="20" name="name3" id="name3"/><br/>
    政治
    <input type="text" value="" size="20" name="name4" id="name4"/><br/>
    总分
    <input type="text" value="" size="20" name="name5" id="name5"/><br/>
    平均分
    <input type="text" value="" size="20" name="name6" id="name6"/><br/>
    <input type="submit" value="提交" id="tj" onclick="return 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;
        var zf=parseFloat(yy)+parseFloat(zz);
        var pjf=zf/2;
        var lj=document.getElementById("bj");
        document.getElementById("name5").value=+zf;
        document.getElementById("name6").value=+pjf;
        row=document.getElementById("table1").insertRow();
        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>';
            }
        return false;	
    }
    
    //编辑指定行内容
    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>

已赞过 已踩过<

评论收起

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

用html和javascript在这个基础上加每添加一行表格的同时，在表格每一行后边有一个编辑，编辑有一个超链接

其他类似问题

为你推荐：