HTML DOM对表格数据的动态操作

最新推荐文章于 2025-04-27 08:12:49 发布

原创最新推荐文章于 2025-04-27 08:12:49 发布 · 1.1k 阅读

·

2

·

CC 4.0 BY-SA版权

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

文章标签：

#html #function #stylesheet #input #button #javascript

技术博文专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一个使用HTML和JavaScript实现的简单页面，该页面能够进行数据的增删改查操作。通过实例展示了如何操作HTML表格元素，包括获取表格数据、添加新行、删除行以及修改特定单元格的内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

以下为正文内容，功能主要实现在一个页面中完成对数据的增、删、改、查操作。

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@include file="check.jsp"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>表格操作</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">


<script type="text/javascript" language="javascript" src="js/util.js"></script>
<script type="text/javascript">
    //row操作行 cell操作单元格
    function tbtest(){
        //获得指定表格的所有单元格
        var cells=$("tb").cells;
        alert("单元格总个数:"+cells.length);
        var rows=$("tb").rows;
        alert("行数"+rows.length);
        /*for(var i=0;i<row.length;i++){
            var cells=rows[i];
        }*/
        //alert("第一行第一列的值是:"+(rows[0].cells)[0].innerHTML);
        alert("第一行第一列的值是:"+(rows[0].cells)[0].innerText);
     }

     var index=0;
     //增加一行
     function addRow(){
         try{
            var tb=$("tb");
            //原表格行数
            var len=tb.rows.length;
            index=len;
            //防止删除之后索引号不连续
            //if(len>=index){
                //index=len;
            //}
            //alert(len);
            //tb.insertRow(0) 返回一个TableRow对象
            //0表示表格第一行合起来在表格第一行加入一条数据
            var tableRow=tb.insertRow(len);
            //以下方法可以给新增的表格加入新的内容
            //x表示第一行中的第一列
            var x=tableRow.insertCell(0);
            //y表示第一行中的第一列
            var y=tableRow.insertCell(1);
            //z表示功能列"删除"
            var z=tableRow.insertCell(2);
            x.innerHTML=index;
            var filmName=$("filmname").value;
            //影片名称动态加载
            y.innerHTML=filmName;
            z.innerHTML="<a href='#' onclick='del(this)'>删除</a>"+"  "+
            "<a href='#' onclick='update(this)'>修改</a>";
            $("filmname").value="";
         }catch(errMsg){
            alert(errMsg.message);
         }
     }

     //删除单元格
     function del(r){
        try{
            //var tb=$("tb");
            //tb.deleteRow(-1)
            //alert(r.parentNode.parentNode.nodeName);
            //alert(r.parentNode.parentNode.innerText);
            //alert(r.parentNode.parentNode.innerHTML);
            var i=r.parentNode.parentNode.rowIndex;
            //索引号从0开始
            //alert("索引号:"+i);
            tb.deleteRow(i);
            //alert(index);
            //index=index+1;
        }catch(errMsg){
           alert(errMsg.message);
        }
     }

     //定义一个全局的row(行级)变量
     var row=null;

     function up(){
       try{
           var fileName=$("filmname").value;
           //alert(row.parentNode.parentNode.cells[1].innerText);
           row.parentNode.parentNode.cells[1].innerHTML=fileName;
           //更新完毕后将按钮上的字修改成"添加影片" 并重新给按钮
           //添加事件
           $("btoper").value="增加影片";
           $("btoper").onclick=addRow;
           $("filmname").value="";
           alert("修改完成");
       }catch(errMsg){
          alert("修改失败，错误原因是:"+errMsg.message);
       }
     }

     function update(r){
        //alert(r.parentNode.parentNode.nodeName);
        //alert((r.parentNode.parentNode.cells)[1].innerText);
        try{
          //var txtContent=(r.parentNode.parentNode.cells)[1].innerText;
          //contentText
          var txtContent=(r.parentNode.parentNode.cells)[1].innerHTML;
          alert("文本内容"+txtContent);
          $("filmname").value=txtContent;
          $("btoper").value="修改影片";
          $("btoper").onclick=up;
          row=r;
        }catch(errMsg){
           alert("异常信息:"+errMsg.message);
        }
     }
</script>

</head>
<body>
    <table id="tb">
      <tr id="tr1">
        <td>编号</td>
        <td>影片名称</td>
        <td>操作</td>
      </tr>
    </table>

    <br>
    增加影片
    <hr>
    <form action="" name="filmform" id="filmform" method="post">
        影片名称:<input type="text" name="filmname" id="filmname"/>
       <br>
       <input type="button" value="添加影片" onclick="addRow();" id="btoper" name="btoper">
    </form>


    <br>
    <input type="button" value="表格DOM操作" onclick="tbtest();">

</body>
</html>

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。