JS动态表格

最新推荐文章于 2023-04-25 21:27:03 发布

setevn.zhang

最新推荐文章于 2023-04-25 21:27:03 发布

阅读量361

点赞数

文章标签： button stylesheet function bt string path

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

本文链接：https://blog.csdn.net/oracle9g/article/details/5700138

版权

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'testtable.jsp' starting page</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">
var strid="1";
function addTableTr(){
   var oTr = document.getElementById("testtable").insertRow();
   var temp_trid="tr"+strid;
   oTr["id"]=temp_trid;
   var aText = new Array();
   var a1="AAA"+strid;
   var a2="BBB"+strid;
   var a3="CCC"+strid;
   var a4="DDD"+strid;
   var a5="<input type='button' name='deltr+"+i+"' trid='"+strid+"' value='删除' οnclick=delTableRr('"+temp_trid+"')>";
   aText[0]=document.createTextNode(a1);
   aText[1]=document.createTextNode(a2);
   aText[2]=document.createTextNode(a3);
   aText[3]=document.createTextNode(a4);
   aText[4]=document.createElement(a5);
   strid++;
   for(var i=0;i<aText.length;i++){
    var oTd = oTr.insertCell(i);
    oTd.appendChild(aText[i]);
   }

   var str="";

   for(var tb in oTr){
    str=str+"oTr["+tb+"]="+oTr[tb]+"<br />";
   }
   abc.innerHTML=str;
}

function delTableRr(strid){
   var oTb = document.getElementById("testtable");
   var j=-1;
   for(var i=1;i<oTb.rows.length;i++){
    if(strid==oTb.rows[i]["id"]){
     j=i;
     break;
    }
   }
   if(oTb.rows.length>1 && j!=-1){
    if(confirm("你确认要删除吗")){
     oTb.deleteRow(j);
    }
   }
}
function deleteTableCell(strCell){
   var oTb = document.getElementById("testtable");
   var cellslen=oTb.rows[0].cells.length;
   var rowslen=oTb.rows.length;

   if(cellslen>0 && rowslen>0){
     for(var i=0;i<rowslen;i++){
      oTb.rows[i].deleteCell(strCell);
     }
   }
}
</script>
</head>

<body>
  <table id="testtable">
   <tr id="tr1">
    <th>
     第一列
    </th>
    <th>
     第二列
    </th>
    <th>
     第三列
    </th>
    <th>
     第四列
    </th>
    <th>
     第五列
    </th>
   </tr>
  </table>
  <input type="button" name="bt" value="添加一行" οnclick="addTableTr();" />
  <input type="button" name="bt" value="删除一行" οnclick="delTableRr();" />
  <input type="button" name="bt" value="删除一列"
   οnclick="deleteTableCell(4);" />

<div id="abc"></div>
</body>
</html>

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

评论

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

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

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