javaweb设计动态表格

设计动态表格，当前面行表格输入好数据后，可以新增新行表格。

<%@page import="com.sun.xml.internal.txw2.Document"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8" import="java.util.*"%><span style="font-size:18px;">
<!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>
<style type="text/css">
body{ background-color:#9CC; text-align:center}
table{ margin:10px auto;}
tr th { border: 1px solid #096;}
td{border: 1px solid #096;}
</style>
<script type="text/javascript">
/*在函数的外部只能声明一些变量之类的，不能用操作方法，因为没有函数去调用执行它。*/
//在载入页面的时候就在表格头放入选择框，因为是一次性的
window.onload = function(){
var tab = document.getElementById('tab');
var firsttr = document.getElementsByTagName('tr')[0];
var childtd = firsttr.childNodes;
//在第一行第一列上加入选择框
var inp = document.createElement('input');
inp.type = 'checkbox'; //DOM Leve 2 事件注册
catchEvent(inp,'click',function(){ //注册函数 不同状态进行判断
if(inp.checked ==true){
allSelect();
}else{
cancelSelect();
}
});
//catchEvent(inp,'click',allSelect);
//catchEvent(inp,'change',cancelSelect);
childtd[0].appendChild(inp); }
//增加一行
//var count =0;//增加一列用来 计数
function addRow(){
//count++;
var tab = document.getElementById('tab');
var firsttr = document.getElementsByTagName('tr')[0];
var childtd = firsttr.childNodes;
var tr = document.createElement('tr');
var arrtd = new Array();
var arrinp = new Array();
for(var i =0;i<childtd.length;i++){
arrtd[i] = document.createElement('td');
arrinp[i] = document.createElement('input');
if(i==0){
arrinp[i].type = 'checkbox';
arrinp[i].name = 'selectbox';
}else if(i==1){
//arrinp[i] = document.createTextNode(count);
arrinp[i] = document.createTextNode('');
}
arrtd[i].appendChild(arrinp[i]);//思考为什么 input也要加上数组。
tr.appendChild(arrtd[i]);
} tab.appendChild(tr);
newSort();
}
//删除操作
function deleteRow(){
var parentTr = new Array();//先把被选中的行放在一个数组上
var box = document.getElementsByName('selectbox');
var tab = document.getElementById('tab');
for(var i = 0;i<box.length;i++){
if(box[i].checked==true){
var parent = box[i].parentNode;
parentTr[i] = parent.parentNode;//如果直接这种为放在里面为什么不能完全删除？？是因为反应不够吗？
//tab.removeChild(parentTr);
}
}
for(var i = 0;i<parentTr.length;i++){ //这样做才能把选中的全部删除
if(parentTr[i]){ //这边要先判断一下是否为空值，如果不为空才去移除，否者会报错。
tab.removeChild(parentTr[i]);
}
}
newSort();
} //如果执行删除的话则，重新进行排序
function newSort(){
var text = new Array();
var child_td = new Array();
var arr_tr = document.getElementsByTagName('tr');
for(var i = 1;i<arr_tr.length;i++){
child_td[i] = arr_tr[i].childNodes[1];//获得从第二行开始所有第二列的节点
if(child_td[i].childNodes[0]){
child_td[i].removeChild(child_td[i].childNodes[0]);
}
text[i] = document.createTextNode(i);
child_td[i].appendChild(text[i]); }
}
//全选操作
function allSelect(){
var box = document.getElementsByName('selectbox');
for(var i= 0;i<box.length;i++){
box[i].checked = true;
}
} //全部取消选择
function cancelSelect(){
var box = document.getElementsByName('selectbox');
for(var i = 0;i<box.length;i++){
if(box[i].checked == true){
box[i].checked =false;
}
}
}
//事件注册函数
function catchEvent(eventobj,event,eventHandler){
if(eventobj.addEventListener){
eventobj.addEventListener(event,eventHandler,false);
}else if(eventobj.attachEvent){
event = 'on'+event;
eventobj.attachEvent(event,eventHandler);
}
} //catchEvent(add,'click',addRow); </script>
</head> <body>
<h3>动态表格</h3>
<input type="button" value="增加" id="add" onclick="addRow()" />
<input type="button" value="全部选择" onclick="allSelect()" />
<input type="button" value="全部取消" onclick="cancelSelect()" />
<input type="button" value="删除" id="delete" onclick="deleteRow()"/>
<table id="tab" cellpadding="5px" cellspacing="0px">
<tr><td></td><td>序号</td><td>题目一</td><td>题目二</td><td>题目三</td></tr>
</table>
</body>
</html></span>

结果如下图:

javaweb设计动态表格相关推荐

jquery实现动态表格项目（表格增加删除/全选/表格变色特效等功能）（附源码+javaWEB开发如果需要可以直接使用）
jquery实现动态表格项目(表格增加删除/全选/表格变色特效)
java使用poi在word中生成柱状图、折线图、饼图、柱状图+折线图组合图、动态表格、文本替换、图片替换、更新内置Excel数据、更新插入的文本框内容、合并表格单元格；
本文参考地址:https://blog.csdn.net/wangxiaoyingWXY/article/details/95377533 在参考文章的基础上,增加了扩展.感谢被参考的妹子.另外该博客 ...
[实用][更新中]Java Apache POI 打印Word文档工具（含文本替换，动态表格功能）
[实用][更新中]Java Apache POI 打印Word文档工具(含文本替换,动态表格功能) 基于Apache POI对Word进行操作一.基于Apache POI封装的word文档工具V1. ...
简单网页设计之表格版
简单网页设计之表格版 <html> <meta http-equiv=Content-Type content="text/html; charset=UTF-8" ...
使用jquery的load方法设计动态加载，并解决被加载页面JavaScript失效问题
使用jquery的load方法设计动态加载,并解决被加载页面JavaScript失效问题参考文章: (1)使用jquery的load方法设计动态加载,并解决被加载页面JavaScript失效问题 ( ...
我的jQuery动态表格插件二
本篇博客是我写在离职后,昨天刚辞职和交接完任务,准备离开.其实我有很多不舍,但是最终还是选择了离开,许多苦楚都埋在我的心底.哎,趁回成都找工作的机会是该好好休息一下了. 在上篇我的jQuery动态表格 ...
HTML设计显示表格
HTML设计显示表格表格在最初的HTML中,仅仅是用于存放各种数据的,因此,表格有很多与数据相关的标记,非常方便. <span style="font-size:24px;" ...
【转】如何设计动态（不定）字段的产品数据库表？
因为最近要用到设计动态量表的功能,找了一篇技术上实现动态设计表字段的文章,借来用用. 原文地址:http://blog.sina.com.cn/s/blog_85295a390101dou0.html ...
JavaScript学习笔记07【6个经典案例——电灯开关、轮播图、自动跳转首页、动态表格、表格全选、表单验证】
Java后端学习路线笔记汇总表[黑马程序员] w3school 在线教程:https://www.w3school.com.cn JavaScript学习笔记01[基础--简介.基础语法.运算符. ...

javaweb设计动态表格

设计动态表格，当前面行表格输入好数据后，可以新增新行表格。

javaweb设计动态表格相关推荐

最新文章

热门文章