<!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>
<title>表格编辑</title>
<style type="text/css">
body,table
{
margin:0;
padding:0;
font-size:14px;
}
table
{
margin:0 auto;
}
table,tr,th,td
{
border:1px solid #cdc;
margin-top:100px;
}
th
{
background-color:green;
width:100px;
}
tr
{
height:20px;
}
.oddColor
{
background-color:#A4BED4;
}
.evenColor
{
background-color:#A6C20B;
}
.overColor
{
background-color:#F1F1F1;
}
</style>
<script type="text/javascript">
//定义嵌套数组
var datas = [["张三", 30, "南昌","男","足球,篮球"], ["李四", 25, "北京","男","足球,乒乓球"], ["王五", 20, "郑州","男","篮球,乒乓球"],
["赵六", 19, "武汉", "男", "足球,乒乓球"], ["李莫", 18, "深圳","女","篮球,乒乓球"], ["罗成", 33, "重庆","男","足球,篮球"],
["王平", 31, "天津","男","足球,篮球"], ["刘萍", 22, "上海","女","篮球,乒乓球"], ["杨丽", 17, "石家庄","女","篮球,乒乓球"],
["郭丽", 30, "广州","女","篮球,乒乓球"]];
var citys = ["南昌", "北京", "郑州", "武汉", "深圳", "重庆", "天津", "上海", "石家庄", "广州"]
var tempRow = null;
var tempValue = null;
var oldColorName = null;
var operatorCol = 6;
//动态创建表格
function CreateMyTable() {
var tblMain = document.getElementById("tblMain");
var rowsCount = tblMain.rows.length;
var addRow;
var addCol;
var detailInfos;
for (var i = 0; i < datas.length; i++) {
addRow = tblMain.insertRow(rowsCount - 1); //控制数据行添加到倒数第二列
//addRow.ondblclick = TableRowEdit; //注册双击事件
//addRow.setAttribute("ondblclick", "TableRowEdit(this);"); //注意这里传了this参数给处理函数
if (i % 2 == 0) {
addRow.className = "evenColor";
}
else {
addRow.className = "oddColor";
}
//表格行高亮显示函数
addRow.onmouseover = function () {
oldColorName = this.className;
this.className = "overColor";
}
addRow.onmouseout = function () {
this.className = oldColorName;
}
addCol = addRow.insertCell(-1);
addCol.innerHTML = "<input type='checkbox' name='item' />";
addCol.align = "center"; //控制列居中
detailInfos = datas[i];
for (var j = 0; j < detailInfos.length; j++) {
addCol = addRow.insertCell(-1);
addCol.innerHTML = detailInfos[j];
if (j == 3) {
addCol.style.width = "120px";
}
else if (j == 4) {
addCol.style.width = "260px";
}
}
addCol = addRow.insertCell(-1);
var divIni = CreateDivByEditAndDelete();
addCol.appendChild(divIni);
addCol.align = "center"; //控制列居中
rowsCount++;
}
}
//设置表格间隔色
function SetTableRowColor() {
var tblMain = document.getElementById("tblMain");
var rows = tblMain.rows;
for (var i = 0; i < rows.length; i++) {
if (i % 2 == 0) {
rows[i].className = "evenColor";
}
else {
rows[i].className = "oddColor";
}
}
}
//动态创建城市下拉框(并带间隔色)
function CreateCityDropdown(selCity) {
var cityDropObj = document.createElement("select")
cityDropObj.id = "cboEditCity";
var optionObj = null;
for (var i = 0; i < citys.length; i++) {
optionObj = document.createElement("option");
optionObj.value = citys[i];
optionObj.innerHTML = citys[i];
if (i % 2 == 0) {
optionObj.className = "evenColor";
}
else {
optionObj.className = "oddColor";
}
if (citys[i] == selCity) { //自动选中当前用户的城市
optionObj.selected = true;
}
cityDropObj.appendChild(optionObj);
}
cityDropObj.style.width = "80px";
return cityDropObj;
}
//表格行编辑事件
function TableRowEdit(curRow) {
var sTmpValue = null;
var tblMain = document.getElementById("tblMain");
if (tempRow) {
//替换为原来的文本
var textNode;
for (var i = 0; i < 5; i++) {
textNode = document.createTextNode(tempValue[i]);
tempRow.cells[i + 1].replaceChild(textNode, tempRow.cells[i + 1].firstChild);
}
var divIni = CreateDivByEditAndDelete();
tempRow.cells[operatorCol].replaceChild(divIni, tempRow.cells[operatorCol].firstChild);
}
tempRow = curRow; //记录双击的行
//记录当前的文本，便于后面还原
tempValue = new Array();
tempValue[0] = GetInnerText(tempRow.cells[1]);
tempValue[1] = GetInnerText(tempRow.cells[2]);
tempValue[2] = GetInnerText(tempRow.cells[3]);
tempValue[3] = GetInnerText(tempRow.cells[4]);
tempValue[4] = GetInnerText(tempRow.cells[5]);
var preNode = null;
//替换姓名文本框
preNode = curRow.cells[1].firstChild;
var txtNameNode = document.createElement("input");
txtNameNode.setAttribute("type", "text");
txtNameNode.id = "txtEditName";
txtNameNode.setAttribute("value", preNode.nodeValue);
txtNameNode.style.width = "80px";
curRow.cells[1].replaceChild(txtNameNode, preNode);
//替换年龄文本框
preNode = curRow.cells[2].firstChild;
var txtAgeNode = document.createElement("input");
txtAgeNode.setAttribute("type", "text");
txtAgeNode.id = "txtEditAge";
txtAgeNode.setAttribute("value", preNode.nodeValue);
txtAgeNode.style.width = "80px";
curRow.cells[2].replaceChild(txtAgeNode, preNode);
//替换城市下拉框
var dropCityNode = CreateCityDropdown(GetInnerText(curRow.cells[3]));
preNode = curRow.cells[3].firstChild;
curRow.cells[3].replaceChild(dropCityNode, preNode);
//替换性别单选按钮组
var divSex = CreateSexDiv();
sTmpValue = GetInnerText(curRow.cells[4]);
preNode = curRow.cells[4].firstChild;
curRow.cells[4].replaceChild(divSex, preNode);
SetRaidoCheck("sex", sTmpValue);
//替换爱好
Javascript表格高级操作
需积分: 3 81 浏览量
2013-01-31
14:15:59
上传
评论
收藏 4KB RAR 举报
表格编辑.rar （1个子文件） 
表格编辑.htm 20KB资源评论
永远爱好写程序
- 粉丝: 142
- 资源: 57
最新资源
- Python大作业：音乐播放软件（爬虫+可视化+数据分析+数据库）
- 课程设计-python爬虫-爬取日报，爬取日报文章后存储到本地，附带源代码+课程设计报告
- 软件和信息技术服务行业投资与前景预测.pptx
- 课程设计-基于SpringBoot + Mybatis+python爬虫NBA球员数据爬取可视化+源代码+文档+sql+效果图
- 软件品质管理系列二项目策划规范.doc
- 基于TensorFlow+PyQt+GUI的酒店评论情感分析，支持分析本地数据文件和网络爬取数据分析+源代码+文档说明+安装教程
- 软件定义无线电中的模拟电路测试技术.pptx
- 软件开发协议(作为技术开发合同附件).doc
- 软件开发和咨询行业技术趋势分析.pptx
- 软件测试题详解及答案.doc
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
