社区
JavaScript
帖子详情
在一个表里 用JAVASCRIPT如何自动添加行,删除所选择的行 在线等待
howard_chen
2003-10-16 02:29:35
按添加按钮网表里添加一行
安删除按钮 删除所选择行的信息
...全文
136
5
打赏
收藏
在一个表里 用JAVASCRIPT如何自动添加行,删除所选择的行 在线等待
按添加按钮网表里添加一行 安删除按钮 删除所选择行的信息
复制链接
扫一扫
分享
转发到动态
举报
写回复
配置赞助广告
用AI写文章
5 条
回复
切换为时间正序
请发表友善的回复…
发表回复
打赏红包
blueice2002
2003-10-16
打赏
举报
回复
document.onclick = cancelSelect;
function findRow(e) {
if (e.tagName == "TR") {
return e;
} else if (e.tagName == "BODY") {
return null;
} else {
return findRow(e.parentElement);
}
}
function findCell(e) {
if (e.tagName == "TD") {
return e;
} else if (e.tagName == "BODY") {
return null;
} else {
return findCell(e.parentElement);
}
}
function deselectRowOrCell(r) {
r.runtimeStyle.backgroundColor = "";
r.runtimeStyle.color = "";
//r.runtimeStyle.fontFamily = "Verdana";
}
function selectRowOrCell(r) {
r.runtimeStyle.backgroundColor = "darkblue";
r.runtimeStyle.color = "white";
//r.runtimeStyle.fontFamily = "Verdana";
}
function addRow() {
var r, p, nr;
if (lastSelection == null) {
r = null;
p = TheTable.children[0];
} else {
r = lastSelection;
if (r.tagName == "TD") {
r = r.parentElement;
}
p = r.parentElement;
}
nr = document.createElement("TR");
p.insertBefore(nr, r);
select(nr);
addCell();
return nr;
}
function removeRow() {
var r, p, nr;
if (lastSelection == null)
return false;
r = lastSelection;
if (r.tagName == "TD") {
r = r.parentElement;
}
p = r.parentElement;
p.removeChild(r);
lastSelection = null;
return r;
}
function addCell() {
var r, p, c, nc, text;
if (lastSelection == null)
return false;
r = lastSelection;
if (r.tagName == "TD") {
r = r.parentElement;
c = lastSelection;
} else {
c = null;
}
nc = document.createElement("TD");
text = document.createTextNode("New Cell");
nc.insertBefore(text, null);
r.insertBefore(nc, c);
select(nc);
return nc;
}
function removeCell() {
var c, p, nr;
if (lastSelection == null)
return false;
c = lastSelection;
if (c.tagName != "TD") {
return null;
}
p = c.parentElement;
p.removeChild(c);
lastSelection = null;
return c;
}
function editContents() {
var c, p, nr;
if (lastSelection == null)
return false;
c = lastSelection;
if (c.tagName != "TD") {
return null;
}
EditCell.style.display = "";
EditCell.value = c.innerHTML;
c.setExpression("innerHTML", "EditCell.value");
EditCell.focus();
EditCell.onblur = unhookContentsExpression;
}
function unhookContentsExpression() {
lastSelection.removeExpression("innerHTML");
EditCell.value = '';
EditCell.style.display = "none";
}
function editStyle() {
var c;
if (lastSelection == null) {
c = TheTable;
} else {
c = lastSelection;
}
EditStyle.style.display = "";
EditStyle.value = c.style.cssText;
c.style.setExpression("cssText", "EditStyle.value");
EditStyle.focus();
EditStyle.onblur = unhookStyleExpression;
}
function unhookStyleExpression() {
var c;
if (lastSelection == null) {
c = TheTable;
} else {
c = lastSelection;
}
c.style.removeExpression("cssText");
EditStyle.value = '';
EditStyle.style.display = "none";
}
function moveUp() {
var r, p, ls;
if (lastSelection == null)
return false;
r = lastSelection;
if (r.tagName != "TR") {
return null;
}
if (r.rowIndex == 0)
return;
ls = r.previousSibling;
p = ls.parentElement;
p.insertBefore(r, ls);
return r;
}
function moveDown() {
var r, p, ls;
if (lastSelection == null)
return false;
r = lastSelection;
if (r.tagName != "TR") {
return null;
}
ls = r.nextSibling;
if (ls == null)
return null;
p = ls.parentElement;
ls = ls.nextSibling;
p.insertBefore(r, ls);
return r;
}
function moveLeft() {
var c, p, ls;
if (lastSelection == null)
return false;
c = lastSelection;
if (c.tagName != "TD") {
return null;
}
ls = c.previousSibling;
if (ls == null)
return null;
p = ls.parentElement;
p.insertBefore(c, ls);
return c;
}
function moveRight() {
var c, p, ls;
if (lastSelection == null)
return false;
c = lastSelection;
if (c.tagName != "TD") {
return null;
}
ls = c.nextSibling;
if (ls == null)
return null;
p = ls.parentElement;
ls = ls.nextSibling;
p.insertBefore(c, ls);
return c;
}
function nothingSelected() {
return (lastSelection == null);
}
function rowSelected() {
var c;
if (lastSelection == null)
return false;
c = lastSelection;
return (c.tagName == "TR")
}
function cellSelected() {
var c;
if (lastSelection == null)
return false;
c = lastSelection;
return (c.tagName == "TD")
}
function whatIsSelected() {
if (lastSelection == null)
return "Table";
if (lastSelection.tagName == "TD")
return "Cell";
if (lastSelection.tagName == "TR")
return "Row";
}
</SCRIPT>
<p align="right"><a href="http://fason.nease.net">【阿信的小天地】</a></p>
</BODY></HTML>
blueice2002
2003-10-16
打赏
举报
回复
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0065)http://msdn.microsoft.com/library/en-us/dndude/html/tableedit.asp -->
<HTML><HEAD><TITLE>Sample</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<STYLE>TR {
FONT-WEIGHT: bold; FONT-SIZE: 20px; COLOR: black; FONT-FAMILY: verdana; BACKGROUND-COLOR: white
}
</STYLE>
<xml>
<MSHelp:Keyword Index="A" Term="tableedit"/>
</xml><!-- TOOLBAR_START --><!-- TOOLBAR_EXEMPT --><!-- TOOLBAR_END -->
<META content="MSHTML 6.00.2600.0" name=GENERATOR></HEAD>
<BODY style="FONT-FAMILY: verdana">
<H2>Table Editor</H2><BR>
<H3>Single click to select a cell, alt-click to select a row</H3><BR>
<DIV id=TableContainer>
<TABLE id=TheTable style="TABLE-LAYOUT: fixed; BORDER-COLLAPSE: collapse"
border=1>
<TBODY>
<TR>
<TD>Cell 1,1</TD>
<TD>Cell 1,2</TD>
<TD>Cell 1,3</TD></TR>
<TR>
<TD>Cell 2,1</TD>
<TD>Cell 2,2</TD>
<TD>Cell 2,3</TD></TR>
<TR>
<TD>Cell 3,1</TD>
<TD>Cell 3,2</TD>
<TD>Cell 3,3</TD></TR></TBODY></TABLE></DIV><BR><BR><BR><INPUT id=ButtonAddRow style="WIDTH: 200px" onclick=addRow() type=button value="Add Row"><BR><INPUT id=ButtonRemoveRow style="WIDTH: 200px" onclick=removeRow() type=button value="Remove Row"><BR><INPUT id=ButtonAddCell style="WIDTH: 200px" onclick=addCell() type=button value="Add Cell"><BR><INPUT id=ButtonRemoveCell style="WIDTH: 200px" onclick=removeCell() type=button value="Remove Cell"><BR><INPUT id=ButtonMoveUp style="WIDTH: 200px" onclick=moveUp() type=button value="Move Up"><BR><INPUT id=ButtonMoveDown style="WIDTH: 200px" onclick=moveDown() type=button value="Move Down"><BR><INPUT id=ButtonMoveLeft style="WIDTH: 200px" onclick=moveLeft() type=button value="Move Left"><BR><INPUT id=ButtonMoveRight style="WIDTH: 200px" onclick=moveRight() type=button value="Move Right"><BR><INPUT id=ButtonEditContents style="WIDTH: 200px" onclick=editContents(); type=button value="Edit Contents">
<INPUT id=EditCell style="DISPLAY: none; WIDTH: 400px"><BR><INPUT id=ButtonEditStyle style="WIDTH: 200px" onclick=editStyle(); type=button value="Edit Table Style">
<INPUT id=EditStyle style="DISPLAY: none; WIDTH: 400px"><BR>
<SCRIPT>
var lastSelection = null;
ButtonAddRow.setExpression("disabled", "nothingSelected(lastSelection)");
ButtonRemoveRow.setExpression("disabled", "! rowSelected(lastSelection)");
ButtonAddCell.setExpression("disabled", "nothingSelected(lastSelection)");
ButtonRemoveCell.setExpression("disabled", "! cellSelected(lastSelection)");
ButtonMoveUp.setExpression("disabled", "! rowSelected(lastSelection)");
ButtonMoveDown.setExpression("disabled", "! rowSelected(lastSelection)");
ButtonMoveLeft.setExpression("disabled", "! cellSelected(lastSelection)");
ButtonMoveRight.setExpression("disabled", "! cellSelected(lastSelection)");
ButtonEditContents.setExpression("disabled", "(! cellSelected(lastSelection)) || (EditCell.style.display == '')");
ButtonEditStyle.setExpression("disabled", "(EditStyle.style.display == '')");
ButtonEditStyle.setExpression("value", "'Edit ' + whatIsSelected(lastSelection) + ' Style'");
function select(element) {
var e, r, c;
if (element == null) {
e = window.event.srcElement;
} else {
e = element;
}
if ((window.event.altKey) || (e.tagName == "TR")) {
r = findRow(e);
if (r != null) {
if (lastSelection != null) {
deselectRowOrCell(lastSelection);
}
selectRowOrCell(r);
lastSelection = r;
}
} else {
c = findCell(e);
if (c != null) {
if (lastSelection != null) {
deselectRowOrCell(lastSelection);
}
selectRowOrCell(c);
lastSelection = c;
}
}
window.event.cancelBubble = true;
}
TableContainer.onclick = select;
function cancelSelect() {
if (window.event.srcElement.tagName != "BODY")
return;
if (lastSelection != null) {
deselectRowOrCell(lastSelection);
lastSelection = null;
}
}
hrong
2003-10-16
打赏
举报
回复
楼上的代码太长了:
<input type=button value=add onclick="mm()">
<table id=tt border=1 width=300>
<tr><td>黄蓉<input type=button value=del onclick='del(this)'></td></tr></table>
<SCRIPT LANGUAGE="JavaScript"><!--
function mm()
{
var t = document.all.tt;
var tr = tt.insertRow();
var td = tr.insertCell();
td.innerHTML = "黄蓉<input type=button value=del onclick='del(this)'>";
}
function del(e)
{
searchObjectByTagName(e, "TR").removeNode(true);
}
function searchObjectByTagName(e, tag)
{
while(e=e.parentElement)
{
if (e.tagName == tag) return(e);
}
}
//--></SCRIPT>
kingdomzhf
2003-10-16
打赏
举报
回复
ButtonAddRow.setExpression("disabled", "nothingSelected(lastSelection)");
ButtonRemoveRow.setExpression("disabled", "! rowSelected(lastSelection)");
ButtonAddCell.setExpression("disabled", "nothingSelected(lastSelection)");
ButtonRemoveCell.setExpression("disabled", "! cellSelected(lastSelection)");
ButtonMoveUp.setExpression("disabled", "! rowSelected(lastSelection)");
ButtonMoveDown.setExpression("disabled", "! rowSelected(lastSelection)");
ButtonMoveLeft.setExpression("disabled", "! cellSelected(lastSelection)");
ButtonMoveRight.setExpression("disabled", "! cellSelected(lastSelection)");
ButtonEditContents.setExpression("disabled", "(! cellSelected(lastSelection)) || (EditCell.style.display == '')");
ButtonEditStyle.setExpression("disabled", "(EditStyle.style.display == '')");
ButtonEditStyle.setExpression("value", "'Edit ' + whatIsSelected(lastSelection) + ' Style'");
function select(element) {
var e, r, c;
if (element == null) {
e = window.event.srcElement;
} else {
e = element;
}
if ((window.event.altKey) || (e.tagName == "TR")) {
r = findRow(e);
if (r != null) {
if (lastSelection != null) {
deselectRowOrCell(lastSelection);
}
selectRowOrCell(r);
lastSelection = r;
}
} else {
c = findCell(e);
if (c != null) {
if (lastSelection != null) {
deselectRowOrCell(lastSelection);
}
selectRowOrCell(c);
lastSelection = c;
}
}
window.event.cancelBubble = true;
}
TableContainer.onclick = select;
function cancelSelect() {
if (window.event.srcElement.tagName != "BODY")
return;
if (lastSelection != null) {
deselectRowOrCell(lastSelection);
lastSelection = null;
}
}
document.onclick = cancelSelect;
function findRow(e) {
if (e.tagName == "TR") {
return e;
} else if (e.tagName == "BODY") {
return null;
} else {
return findRow(e.parentElement);
}
}
function findCell(e) {
if (e.tagName == "TD") {
return e;
} else if (e.tagName == "BODY") {
return null;
} else {
return findCell(e.parentElement);
}
}
function deselectRowOrCell(r) {
r.runtimeStyle.backgroundColor = "";
r.runtimeStyle.color = "";
//r.runtimeStyle.fontFamily = "Verdana";
}
function selectRowOrCell(r) {
r.runtimeStyle.backgroundColor = "darkblue";
r.runtimeStyle.color = "white";
//r.runtimeStyle.fontFamily = "Verdana";
}
function addRow() {
var r, p, nr;
if (lastSelection == null) {
r = null;
p = TheTable.children[0];
} else {
r = lastSelection;
if (r.tagName == "TD") {
r = r.parentElement;
}
p = r.parentElement;
}
nr = document.createElement("TR");
p.insertBefore(nr, r);
select(nr);
addCell();
return nr;
}
function removeRow() {
var r, p, nr;
if (lastSelection == null)
return false;
r = lastSelection;
if (r.tagName == "TD") {
r = r.parentElement;
}
p = r.parentElement;
p.removeChild(r);
lastSelection = null;
return r;
}
function addCell() {
var r, p, c, nc, text;
if (lastSelection == null)
return false;
r = lastSelection;
if (r.tagName == "TD") {
r = r.parentElement;
c = lastSelection;
} else {
c = null;
}
nc = document.createElement("TD");
text = document.createTextNode("New Cell");
nc.insertBefore(text, null);
r.insertBefore(nc, c);
select(nc);
return nc;
}
function removeCell() {
var c, p, nr;
if (lastSelection == null)
return false;
c = lastSelection;
if (c.tagName != "TD") {
return null;
}
p = c.parentElement;
p.removeChild(c);
lastSelection = null;
return c;
}
function editContents() {
var c, p, nr;
if (lastSelection == null)
return false;
c = lastSelection;
if (c.tagName != "TD") {
return null;
}
EditCell.style.display = "";
EditCell.value = c.innerHTML;
c.setExpression("innerHTML", "EditCell.value");
EditCell.focus();
EditCell.onblur = unhookContentsExpression;
}
function unhookContentsExpression() {
lastSelection.removeExpression("innerHTML");
EditCell.value = '';
EditCell.style.display = "none";
}
function editStyle() {
var c;
if (lastSelection == null) {
c = TheTable;
} else {
c = lastSelection;
}
EditStyle.style.display = "";
EditStyle.value = c.style.cssText;
c.style.setExpression("cssText", "EditStyle.value");
EditStyle.focus();
EditStyle.onblur = unhookStyleExpression;
}
function unhookStyleExpression() {
var c;
if (lastSelection == null) {
c = TheTable;
} else {
c = lastSelection;
}
c.style.removeExpression("cssText");
EditStyle.value = '';
EditStyle.style.display = "none";
}
function moveUp() {
var r, p, ls;
if (lastSelection == null)
return false;
r = lastSelection;
if (r.tagName != "TR") {
return null;
}
if (r.rowIndex == 0)
return;
ls = r.previousSibling;
p = ls.parentElement;
p.insertBefore(r, ls);
return r;
}
function moveDown() {
var r, p, ls;
if (lastSelection == null)
return false;
r = lastSelection;
if (r.tagName != "TR") {
return null;
}
ls = r.nextSibling;
if (ls == null)
return null;
p = ls.parentElement;
ls = ls.nextSibling;
p.insertBefore(r, ls);
return r;
}
function moveLeft() {
var c, p, ls;
if (lastSelection == null)
return false;
c = lastSelection;
if (c.tagName != "TD") {
return null;
}
ls = c.previousSibling;
if (ls == null)
return null;
p = ls.parentElement;
p.insertBefore(c, ls);
return c;
}
function moveRight() {
var c, p, ls;
if (lastSelection == null)
return false;
c = lastSelection;
if (c.tagName != "TD") {
return null;
}
ls = c.nextSibling;
if (ls == null)
return null;
p = ls.parentElement;
ls = ls.nextSibling;
p.insertBefore(c, ls);
return c;
}
function nothingSelected() {
return (lastSelection == null);
}
function rowSelected() {
var c;
if (lastSelection == null)
return false;
c = lastSelection;
return (c.tagName == "TR")
}
function cellSelected() {
var c;
if (lastSelection == null)
return false;
c = lastSelection;
return (c.tagName == "TD")
}
function whatIsSelected() {
if (lastSelection == null)
return "Table";
if (lastSelection.tagName == "TD")
return "Cell";
if (lastSelection.tagName == "TR")
return "Row";
}
</script>
kingdomzhf
2003-10-16
打赏
举报
回复
<html>
<head>
<style>
TR {background-color: white; color: black; font-family: verdana; font-size: 20; font-weight: bold;}
</style>
</head>
<!-- TOOLBAR_START --><!-- TOOLBAR_EXEMPT --><!-- TOOLBAR_END -->
<body style="font-family: verdana">
<h2>Table Editor</h2>
<br>
<h3>Single click to select a cell, alt-click to select a row</h3>
<br>
<div id=TableContainer>
<table id=TheTable border=1 style="border-collapse: collapse; table-layout: fixed">
<tbody>
<tr><td>Cell 1,1</td><td>Cell 1,2</td><td>Cell 1,3</td></tr>
<tr><td>Cell 2,1</td><td>Cell 2,2</td><td>Cell 2,3</td></tr>
<tr><td>Cell 3,1</td><td>Cell 3,2</td><td>Cell 3,3</td></tr>
</tbody>
</table>
</div>
<br><br><br>
<input id=ButtonAddRow style="width: 200px;" type=button value="Add Row" onclick="addRow()"><br>
<input id=ButtonRemoveRow style="width: 200px;" type=button value="Remove Row" onclick="removeRow()"><br>
<input id=ButtonAddCell style="width: 200px;" type=button value="Add Cell" onclick="addCell()"><br>
<input id=ButtonRemoveCell style="width: 200px;" type=button value="Remove Cell" onclick="removeCell()"><br>
<input id=ButtonMoveUp style="width: 200px;" type=button value="Move Up" onclick="moveUp()"><br>
<input id=ButtonMoveDown style="width: 200px;" type=button value="Move Down" onclick="moveDown()"><br>
<input id=ButtonMoveLeft style="width: 200px;" type=button value="Move Left" onclick="moveLeft()"><br>
<input id=ButtonMoveRight style="width: 200px;" type=button value="Move Right" onclick="moveRight()"><br>
<input id=ButtonEditContents style="width: 200px;" type=button value="Edit Contents" onclick="editContents();">
<input type=text style="display: none; width: 400px;" id=EditCell><br>
<input id=ButtonEditStyle style="width: 200px;" type=button value="Edit Table Style" onclick="editStyle();">
<input type=text style="display: none; width: 400px;" id=EditStyle><br>
<script>
var lastSelection = null;
计算机应用技术(实用手册)
让默认的就可以了,但是超频玩者是肯定不会放过任何可以提高性能的东西的,所以如果你想在这里让你的电脑提升一点性能的话,就必须慢慢试验,
选择
一个
适当的参数才能让你的计算机达到性能和稳定的最佳状态!...
回顾经典-读《
JavaScript
高级程序设计》
本章主要讲了
JavaScript
的一些历史
JavaScript
包含三个部分:ECMAScript(核心)、DOM(文档对象模型)、BOM(浏览器对象模型)ECMAScript:即 ECMA-262的定义,他描述了这本语言的基础(语法、类型、语句、关键字、保留...
2小时入门小程序登陆注册功能开发
注册页面1,获取用户输入2,对用户输入的账号密码做校验3,提交注册4,把注册的用户信息存入数据库登陆页面1,注册完成后跳转到登陆页面2,登陆页面用户输入信息的获取3,对用户输入的账号密码做合法校验4,实现登陆功能5,从用户
表里
获取用户账号和密码,然后和用户输入的账号和密码做比对校验6,登陆成功后跳转到首页订阅消息(模板消息)1,云开发入门2,用户openid获取3,订阅消息授权4,模板消息推送
测试技能整理-功能
自动
化
功能
自动
化
Django 企业级接口
自动
化测试平台实战(一)
Django是
一个
开放源代码的Web应用框架,由Python写成。Django遵守BSD版权,初次发布于2005年7月, 并于2008年9月发布了第
一个
正式版本1.0 。Django采用了采用了MVC的框架模式,即模型M,视图V和控制器C;MVT的软件...
JavaScript
87,910
社区成员
224,616
社区内容
发帖
与我相关
我的任务
JavaScript
Web 开发 JavaScript
复制链接
扫一扫
分享
社区描述
Web 开发 JavaScript
社区管理员
加入社区
获取链接或二维码
近7日
近30日
至今
加载中
查看更多榜单
社区公告
暂无公告
试试用AI创作助手写篇文章吧
+ 用AI写文章