老掉牙裴帮助关于Javascript动态创建表格的小练习
日期：2014-05-16 浏览次数：20405 次
<%@ 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>动态创建表</title>
??<meta http-equiv="pragma" content="no-cache">
??<meta http-equiv="cache-control" content="no-cache">
??<script type="text/javascript"
???src="<%=path%>/js/jquery/jquery-1.3.2.js"></script>
?</head>
?<script type="text/javascript">
?/**
?功能描述：动态创建表格
?日期：2010-7-14
?作者：老裴
?--------------------------------------
?*/
/*
添加行
*/
function add(){
var obj_table =document.getElementById("table_1");
var tr_len = obj_table.rows.length;
var obj_tr = document.createElement("tr");
obj_table.appendChild(obj_tr);
obj_tr.id ="tr_"+tr_len;
obj_tr.align="center";
var cell_0 = document.createElement("td");
obj_tr.appendChild(cell_0);
cell_0.innerHTML="<input type='checkBox' name='CB' id='CB'/>";
var cell_1 = document.createElement("td");
obj_tr.appendChild(cell_1);
cell_1.id="XH_"+tr_len;
cell_1.innerHTML = tr_len;
var cell_2 =? document.createElement("td");;
obj_tr.appendChild(cell_2);
cell_2.innerHTML = "XXXXX";
var cell_3 =? document.createElement("td");;
obj_tr.appendChild(cell_3);
cell_3.innerHTML = "<a href=\"javascript:del('tr_"+tr_len+"');\" id=\"add\" style=\"text-decoration: none;\">删除</a>";
}
/**
添加行
*/
function addItem(){
var obj_table = document.getElementById("table_1");
var tr_len = obj_table.rows.length;
var obj_tr = obj_table.insertRow(tr_len);
obj_tr.id="tr_"+tr_len;
obj_tr.align="center";
var obj_cell_0= obj_tr.insertCell(0);
obj_cell_0.innerHTML="<input type='checkBox' name='CB' id='CB'/>";
var obj_cell_1= obj_tr.insertCell(1);
obj_cell_1.innerHTML=tr_len;
var obj_cell_2= obj_tr.insertCell(2);
obj_cell_2.innerHTML="<input type=\"text\" name=\"content\" id=\"content\"? value=\"12345678965654\" sytle=\"width:100%\"/>";
var obj_cell_3= obj_tr.insertCell(3);
obj_cell_3.innerHTML="<a href=\"javascript:del('tr_"+tr_len+"');\" id=\"del\" style=\"text-decoration: none;\">删除</a>";
}
/*
删除行
*/
function del(id){
var obj_table =document.getElementById("table_1");
var tr_len = obj_table.rows.length;
for(var i=1;i <tr_len; i++ ){
??? var tr = obj_table.rows[i].id;
??? if(id == tr){
??? obj_table.deleteRow(i);
??? break;
??? }
?}
?//重新排序
?repeateSort();
}
?
?/**
?重新排序
?*/
?function repeateSort(){
?var obj_table =document.getElementById("table_1");
?var tr_len = obj_table.rows.length;
?for(var i=1;i <tr_len; i++ ){
??? var cell_len = obj_table.rows[i].cells.length;
??? obj_table.rows[i].cells[1].innerHTML=i;
??}
?}
/**
全选
*/
function selectAll(){
?var obj_checkbox = document.getElementsByName("CB");
?var cb_len = obj_checkbox.length;
?var isFull = 0;
?for(var i=0;i< cb_len;i++){
??var flag =? obj_checkbox[i].checked;
??if(flag == true){
???? isFull++;
??}
??obj_checkbox[i].checked =true;
?}
?if(isFull == cb_len){
??for(var i=0;i< cb_len;i++){
???obj_checkbox[i].checked =false;
??}?
?}
}
/*
反选
*/
function reverseSelect(){
?var obj_checkbox= document.getElementsByName("CB");
?var cb_len = obj_checkbox.length;
?for(var i=0;i< cb_len; i++){
??if(obj_checkbox[i].checked){
???obj_checkbox[i].checked=false;
??}else{
??obj_checkbox[i].checked=true;
??}
?}
}
/**
删除选中行
*/
