js添加修改删除表格中数据修改时在表格中直接修改

Posted kevin

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js添加修改删除表格中数据修改时在表格中直接修改相关的知识,希望对你有一定的参考价值。

<html>
<head>
<script type="text/javascript">
function xianshi(){
    //切换添加表单
var display=document.getElementById("add");
    if(display.style.display=="block"){
        display.style.display="none";
    }else{
        display.style.display="block";
    }
    
    
}
function add(){
    var mytab=document.getElementById("table");
    //获取用户信息
var no=parseInt(document.getElementById("index").value);
var name=document.getElementById("name").value;
var iname=document.getElementById("iname").value;

    //插入表格
var tabRow;
     for(var i=1;i<mytab.rows.length;i++){
        var num=parseInt(mytab.rows[i].cells[0].innerText);
        //alert(index+""+i );
        //如果当前的表单中编号和输入的编号有重复提示用户,并返回不添加
        if(num==no){
            alert("编号重复");
            return false;
        }
        //输入的编号小于当前遍历的某个编号是,插入当前位置
         if(num>no){
             
          tabRow=mytab.insertRow(i);//如果已有的编号大于输入编号,插入到当前行
         
         tabRow.insertCell(0).innerHTML=no;
        tabRow.insertCell(1).innerHTML=name;
        tabRow.insertCell(2).innerHTML=iname;
        tabRow.insertCell(3).innerHTML="<a href=‘#‘ onclick=del("
        +no+")>删除</a>||<a onclick=alter("+no+") href=‘#‘>修改</a>";
             return;
             
        }
    } 
    
    //要插入的行
    tabRow=mytab.insertRow(mytab.rows.length);
        
    //插入行的列
    tabRow.insertCell(0).innerHTML=no;
    tabRow.insertCell(1).innerHTML=name;
    tabRow.insertCell(2).innerHTML=iname;
    tabRow.insertCell(3).innerHTML="<a href=‘#‘ onclick=del("
    +no+")>删除</a>||<a onclick=alter("+no+") href=‘#‘>修改</a>";
}
function del(no){
var mytab=document.getElementById("table");
    
    for(var i=1;i<mytab.rows.length;i++){//遍历每一行取出编号
    var num=parseInt(mytab.rows[i].cells[0].innerText);
        if(num==no){//如果遍历的编号等于输入的编号,就删除当前行
            mytab.deleteRow(i);
        }
    }
    
    
}

function alter(no){

    //提示用户输入要修改的列数
    var a=window.prompt("请输入要修改的列数");
        a--;
        
        //如果输入的列数等于第一列,那目前提示用户,不能修改编号
        if(a==0){
            alert("不能修改英雄的编号");
            return;
        }
        var mytab=document.getElementById("table");
        for(var i=1;i<mytab.rows.length;i++){//遍历每一行
            var num=parseInt(mytab.rows[i].cells[0].innerText);//取出每一行的编号
                if(num==no){//如果遍历的编号等于函数传进来的编号,修改该行
                    if(a<mytab.rows[i].cells.length-1){
                        var cellText=mytab.rows[i].cells[a].innerText;
                    mytab.rows[i].cells[a].innerHTML="<input onblur=blur1(this,"+i+","+a+") type=‘text‘ value="
                    +cellText+" style=‘width:64px‘  />";
                    }
                }
            }
            
    
        
    
    
    
}

function blur1(obj,i,a){
    document.getElementById("table").rows[i].cells[a].innerText=obj.value;
}
</script>
</head>
<body>
    <table id="table" border="1" style="align:center;width:300px;">
        <tr align="center"><td>编号</td><td>名字</td><td>外号</td><td>操作</td></tr>
        <!-- <tr ><td>1</td><td>宋江</td><td>及时雨</td><td><a href="#">删除</a>||<a href="#">修改</a></td></tr>
        <tr ><td>2</td><td>吴用</td><td>吴大哥</td><td><a href="#">删除</a>||<a href="#">修改</a></td></tr>
        <tr ><td>8</td><td>吴用</td><td>吴大哥</td><td><a href="#">删除</a>||<a href="#">修改</a></td></tr> -->
    </table>
    <button onclick="xianshi()">添加/隐藏</button>
    
    <table id="add" style="display:none">
        <caption style="font-size:26px;">添加英雄人物</caption>
        <tr><td>编号:<input type="text" id="index"name="index"/></td></tr>
        <tr><td>姓名:<input type="text" id="name" name="name"/></td></tr>
        <tr><td>外号:<input type="text" id="iname" name="iname"/></td></tr>
        <tr><td><input type="submit" value="添加英雄" onclick="add()"/></td></tr>
    </table>
    
    
</body>
</html>

 

以上是关于js添加修改删除表格中数据修改时在表格中直接修改的主要内容,如果未能解决你的问题,请参考以下文章

js 表格的每一行都有一个按钮 点击按钮修改当前行某一列的信息

php用表格的形式显示连接的一张mysql表格,并具有直接在表格中修改、删除mysql表中数据的功能

查找表格最后一列,并且添加删除和修改按钮

只用js如何实现表格内容的动态修改?

数据库(概念语法DBMSSQL语言:创建数据库表格,添加修改删除数据记录)

element修改表单中的数据,表格中的数据直接修改问题