<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>无标题文档</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script language="javascript">/*
//拖动部分
*/function swap(a,b){
var s=b.innerHTML;
b.innerHTML=a.innerHTML;
a.innerHTML=s;
}function getCell() {
var oCell = event.srcElement;
if (oCell.tagName && oCell.tagName.toUpperCase() == "TD")
return oCell;
return null;
}var bToggle = false;
var oCellCur = null;
var oCellNew = null;
document.onmousedown = function () {
oCellCur = getCell();
if (!oCellCur)
return;
bToggle = true;
oCellCur.setCapture();
}document.onmousemove = function () {
if (bToggle)
{
document.body.style.cursor = "move";
}
else
{
document.body.style.cursor = "default";
}
}document.onmouseup = function () {
bToggle = false;
if (oCellCur)
oCellCur.releaseCapture();
oCellNew = getCell();
if (!oCellNew || !oCellCur || oCellNew == oCellCur)
return;
swap(oCellCur, oCellNew);
}/*
//编辑部分
*/
function addRow(src){
//alert(src);
var newrow = src.insertRow(src.rows.length-1);
newrow.height=20;
var i=4;
while(i--)
{
var newcell = newrow.insertCell();
switch(i){
case 0: newcell.innerHTML= '<span onmouserover="this.style.textDecoration=\'underline\'" onclick="javascript:return delRow(this.parentElement.parentElement);" style="cursor:hand;">删除此行</span>';newcell.align='middle';break;
default: newcell.innerHTML=div1.innerHTML;break;
}
}
newrow.cells[0].children[0].focus();}
function delRow(src){
var tab=src.parentElement;
var i=tab.rows.length;
while(i--){
if(src==tab.rows[i]){
alert("是否删除"+ i + "行?");
tab.deleteRow(i);
}
}
}function nextRow(obj)
{ if(event.keyCode==13)
{
if(obj.cellIndex != 2)
{
event.keyCode = 9;
}
else
{
addRow(obj.parentElement.parentElement);
}
}
}
</script>
</head><body>
<table id="tb" width="100%" border="1" align="center" cellpadding="1" style="border-collapse:collapse" bordercolor="#111111">
<tr>
<th scope="col" width="25%">奶类</th>
<th scope="col" width="25%">数量</th>
<th scope="col" width="25%">总重</th>
<th scope="col" width="25%" align="center">操作</th>
</tr>
<tr id="blankRow" onClick="addRow(this.parentElement)">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<div id="div1" style="display:none "><input id="txt" type="text" style="width:95%;border:1px solid #90C4FF;" onkeydown="javascript:return nextRow(this.parentElement)"></div>
</body>
</html>
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>无标题文档</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script language="javascript">/*
//拖动部分
*/function swap(a,b){
var s=b.innerHTML;
b.innerHTML=a.innerHTML;
a.innerHTML=s;
}function getCell() {
var oCell = event.srcElement;
if (oCell.tagName && oCell.tagName.toUpperCase() == "TD")
return oCell;
return null;
}var bToggle = false;
var oCellCur = null;
var oCellNew = null;
document.onmousedown = function () {
oCellCur = getCell();
if (!oCellCur)
return;
bToggle = true;
oCellCur.setCapture();
}document.onmousemove = function () {
if (bToggle)
{
document.body.style.cursor = "move";
}
else
{
document.body.style.cursor = "default";
}
}document.onmouseup = function () {
bToggle = false;
if (oCellCur)
oCellCur.releaseCapture();
oCellNew = getCell();
if (!oCellNew || !oCellCur || oCellNew == oCellCur)
return;
swap(oCellCur, oCellNew);
}/*
//编辑部分
*/
function addRow(src){
//alert(src);
var newrow = src.insertRow(src.rows.length-1);
newrow.height=20;
var i=4;
while(i--)
{
var newcell = newrow.insertCell();
switch(i){
case 0: newcell.innerHTML= '<span onmouserover="this.style.textDecoration=\'underline\'" onclick="javascript:return delRow(this.parentElement.parentElement);" style="cursor:hand;">删除此行</span>';newcell.align='middle';break;
default: newcell.innerHTML=div1.innerHTML;break;
}
}
newrow.cells[0].children[0].focus();}
function delRow(src){
var tab=src.parentElement;
var i=tab.rows.length;
while(i--){
if(src==tab.rows[i]){
alert("是否删除"+ i + "行?");
tab.deleteRow(i);
}
}
}function nextRow(obj)
{ if(event.keyCode==13)
{
if(obj.cellIndex != 2)
{
event.keyCode = 9;
}
else
{
addRow(obj.parentElement.parentElement);
}
}
}
</script>
</head><body>
<table id="tb" width="100%" border="1" align="center" cellpadding="1" style="border-collapse:collapse" bordercolor="#111111">
<tr>
<th scope="col" width="25%">奶类</th>
<th scope="col" width="25%">数量</th>
<th scope="col" width="25%">总重</th>
<th scope="col" width="25%" align="center">操作</th>
</tr>
<tr id="blankRow" onClick="addRow(this.parentElement)">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<div id="div1" style="display:none "><input id="txt" type="text" style="width:95%;border:1px solid #90C4FF;" onkeydown="javascript:return nextRow(this.parentElement)"></div>
</body>
</html>
<table border=1 id=tab>
<tr><td>1</td><td>2</td></tr>
<tr><td>3</td><td>4</td></tr>
<tr><td>5</td><td>6</td></tr>
</tr>
</table>如果我想用javascript在这个表的第一行后第二行前动态插入新行<tr><td colspan=2>5</td></tr>
怎么插呢?
有详细教程吗?~~~~如果我想实现下面功能怎么办?若有一个表格:
<table border=1 id=tab>
<tr><td>1</td><td>2</td></tr>
<tr><td>3</td><td>4</td></tr>
<tr><td>5</td><td>6</td></tr>
</tr>
</table>如果我想用javascript在这个表的第一行后第二行前动态插入新行<tr><td colspan=2>5</td></tr>
怎么插呢?
<!-- 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;
}
}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";
}
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>