js的table表格添加与修改

最新推荐文章于 2024-05-16 16:52:30 发布

天才小日月

最新推荐文章于 2024-05-16 16:52:30 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： js验证文章标签： table button input function xhtml border

本文链接：https://blog.youkuaiyun.com/m1123099702/article/details/6833576

js验证专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一个简单的在线表格管理系统，包括添加、删除、修改和更新表格数据的功能，使用JavaScript实现表格交互，提供用户友好的界面。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript">
   var number =1;
   function delRow(s){
   if(document.getElementById("myTable").rows.length==1){
   return;
   }else if(s=="z"){
document.getElementById("myTable").deleteRow(document.getElementById("myTable").rows.length-1);}else if(!window.confirm("您确定要删除"+document.getElementById("myTable").rows[document.getElementById(s).rowIndex].cells[0].innerHTML)){
       return;


   }else{
   document.getElementById("myTable").deleteRow(document.getElementById(s).rowIndex);
   }
   }
   function updateRow(){
   var uRow=document.getElementById("myTable").rows[0];
   uRow.className="t";
   }
   function addRow(){
   var newRow=document.getElementById("myTable").insertRow(document.getElementById("myTable").rows.length);
   var index=document.getElementById("myTable").rows.length-1;
   newRow.id=index;

   var col1=newRow.insertCell(0);
   col1.innerHTML="小马哥的杰作"+number;
   number++;
   var col2=newRow.insertCell(1);
   col2.innerHTML="18.50";
   col2.align="center";
   var col3=newRow.insertCell(2);
   col3.align="center";
   col3.innerHTML='<input type="button" onclick="delRow('+index+')" name="Submit2" value="删除" />   <input type="button" onclick="update('+index+')" id="d'+index+'" name="Submit2" value="修改" />';
   }
   function update(s)
   {

           if(document.getElementById("d"+s).value=="修改"){
           if(window.confirm("您确定要修改"+document.getElementById("myTable").rows[document.getElementById(s).rowIndex].cells[0].innerHTML)){
               editRow(s);
               }

           }else if(document.getElementById("d"+s).value=="确定"){
               upRow(s);
           }

   }
   function upRow(z){
   var info=   document.getElementById("t"+z).value;
   for(var i=0;i<info.length;i++){
       if(!(info.substring(i)>="0"&&info.substring(i)<="9")){
           alert("只能为数字!");
                   return ;
       }


   }alert("修改成功..");
   document.getElementById(z).cells[1].innerHTML=info;

           document.getElementById("d"+z).value="修改";
   }
   function editRow(z){
   var info=   document.getElementById(z).cells[1].innerHTML;
   document.getElementById(z).cells[1].innerHTML='<input name="textfield" type="text" id="t'+z+'" size="6" maxlength="5" value="'+info+'"/>';
           document.getElementById("d"+z).value="确定";
   document.getElementById("t"+z).select();
   }
</script>
<style type="text/css">

</style>
</head>

<body>
<form id="form1" name="form1" method="post" action="">
<table width="745" border="1" id="myTable">
    <tr>
      <td width="212">书名</td>
      <td width="87" align="center">价格$(美元)</td>
      <td width="119" align="center">操作</td>
    </tr>
    <tr id="1" >
      <td>看得见风景的房子</td>
      <td align="center">30</td>
      <td align="center">
        <input type="button" onclick="delRow(1)" name="Submit" value="删除" />
        <input type="button" onclick="update(1)" id="d1"name="Submit2" value="修改" /> </td>
    </tr>
    <tr id="2" >
      <td>60个瞬间
      </td>
      <td align="center">32</td>
      <td align="center"><input onclick="delRow(2)"type="button" name="Submit2" value="删除" /> <input type="button" onclick="update(2)" id="d2" name="Submit2" value="修改" /></td>
    </tr>
</table>
<input type="button"   onclick="addRow()" value="添加一行" />
    <input type="button" onclick="delRow('z')" value="删除最后一行" />
    <input type="button" onclick="updateRow()" value="修改标题" />
</form>
</body>
</html>