87,922
社区成员
发帖
与我相关
我的任务
分享跪求一个动态表格，是答对奉献100分！
请各位帮忙看看！
http://www.ruzuo.net/space.php?uid=93&do=album&picid=2599
http://www.ruzuo.net/space.php?uid=93&do=album&picid=2599
...全文
请发表友善的回复…
发表回复
caiying2009 2009-03-29
- 打赏
- 举报
<html>
<head>
<meta http-equiv="Content-Language" content="zh-cn">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>动态增删表格caiying2009</title>
<style>
*{font-size:12px;}
td{height:20px;}
.td1{width:55px}
.td2{width:80px}
.td3{width:60px}
.td4{width:135px;CURSOR: pointer}
</style>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="0" id="table2" >
<tr>
<td class=td1 width="54">试题</td>
<td class=td2 width="75">选项类型</td>
<td class=td3 width="67">分值</td>
<td class=td4 title="双击显示增删按钮">选项</td>
</tr>
</table>
<div id=menuCon style="position:absolute;display:none">
<input type=button value="增加"><input type=button value="删除">
</div>
<script language="javascript">
<!--
var objTAB
var maxTR=4;//“小行”（分值／选项）行数
onload=function(){
objTAB=document.getElementById("table2")
objTAB.ondblclick=function(){setMenu(event)}
}
function setMenu(e){
var eTd=$$(e,"td")//点击的TD对象
var eTr=$$(e,"tr")//点击的TR对象
if(eTd.cellIndex>=eTr.cells.length-1 &&eTr.rowIndex==0 &&objTAB.rows.length<2){showMenu(eTr);hidDelBt();}//for 表格头行
else if (eTd.cellIndex>=eTr.cells.length-1 && eTr.rowIndex==objTAB.rows.length-1){showMenu(eTr);showDelBt()}//for 表格体行
}
function showMenu(eTr){
with($("menuCon")){
getElementsByTagName("input")[0].onclick=function(){ (eTr.rowIndex*1%maxTR==0)?addRows(eTr,true):addRows(eTr,false)}//“大行”：“小行”
getElementsByTagName("input")[1].onclick=function(){ delRows(eTr)}
var p=getPosition(eTr)
style.top=p[1]+"px"
style.left=p[0]+p[3]+"px"
style.display=""
getElementsByTagName("input")[0].focus()
}
document.onclick=function (){setMent()}//页面点击事件（关闭菜单）
}
var allTr=0;//用于:“大行”标记(tr.id="tr_"+allTr) //“大行”跨越“小行”多少行（$("tr_"+allTr).cells[0].rowSpan=）//“试题”序号("试题"+allTr)
function addRows(esrc,c){//添加TR & TD
var tr=objTAB.insertRow()//添加TR
if (c){//“大行”
tr.insertCell().className="td1"//添加TD及其样式
tr.insertCell().className="td2"//添加TD及其样式
}
tr.insertCell().className="td3"//添加TD及其样式
tr.insertCell().className="td4"//添加TD及其样式
if (c){//“大行”（试题／选项类型）
allTr++
tr.id="tr_"+allTr
tr.cells[0].innerHTML="试题"+allTr//填写单元格(试题)
tr.cells[1].innerHTML="单选/多选"//填写单元格(选项类型)
tr.cells[2].innerHTML=tr.rowIndex//填写单元格(分值)
tr.cells[3].innerHTML=tr.rowIndex%maxTR//填写单元格(选项)
tr.cells[3].title="双击显示增删按钮"
}
else{//“小行”（分值／选项）
tr.cells[0].innerHTML=tr.rowIndex//填写单元格(分值)
tr.cells[1].innerHTML=tr.rowIndex%maxTR//填写单元格(选项)
tr.cells[1].title="双击显示增删按钮"
}
$("tr_"+allTr).cells[0].rowSpan=tr.rowIndex%maxTR==0?maxTR:tr.rowIndex%maxTR;
$("tr_"+allTr).cells[1].rowSpan=tr.rowIndex%maxTR==0?maxTR:tr.rowIndex%maxTR;
}
function delRows(esrc){
if (esrc.id)allTr--
objTAB.deleteRow(esrc.rowIndex)
}
function hidDelBt(){//隐藏“删除”按钮 for 表格头行
$("menuCon").getElementsByTagName("input")[1].style.display="none"
}
function showDelBt(){//显示“删除”按钮 for 表格体行
$("menuCon").getElementsByTagName("input")[1].style.display=""
}
function setMent(){//菜单容器外点击关闭菜单
var esrc=$$(event)
if (esrc!=$("menuCon"))delMenu()
}
function delMenu(){//删除菜单
with($("menuCon")){
getElementsByTagName("input")[0].onclick=null
getElementsByTagName("input")[1].onclick=null
style.display="none"
}
document.onclick=null
}
function $$(e,c){//返回事件的源对象
var event = window.event || e;
var esrc = event.srcElement || event.target;
if (c)//如果有参数C,返回事件的源对象的C父级对象
while(esrc.tagName.toLowerCase()!=c)esrc=esrc.parentNode
return esrc
}
function $(id){return document.getElementById(id)}//获取指定对象
function getPosition(theElement){//获取坐标
var positionX =0;
var positionY =0;
var positionH=theElement.offsetHeight
var positionW=theElement.offsetWidth
while (theElement !=null){
positionX +=theElement.offsetLeft;
positionY +=theElement.offsetTop;
theElement =theElement.offsetParent;
}
return [positionX,positionY,positionH,positionW];
}
//-->
</script>
</body>
</html>
hoojo 2009-03-27
- 打赏
- 举报
</head><body><FORM method=post name=ecform>
<META content="MSHTML 5.00.2920.0" name=GENERATOR>
<DIV id=div1
style="LEFT: 0px; POSITION: absolute; TOP: 0px; VISIBILITY: visible; WIDTH: 658px">
<TABLE bgColor=silver border=2 borderColorDark=gray borderColorLight=silver
cellPadding=2 cellSpacing=1 cols=1 id=PLList rules=rows width="100%">
<TBODY>
<TR bgColor=#0a6846 id=tdt>
<TH width=80><FONT color=white>删除
<INPUT name=PLID type=hidden>
<INPUT
name=edit type=hidden>
</FONT></TH>
<TH width="559">
<INPUT name=medication type=hidden>
<FONT
color=white>变化表格 </font>
</TR>
<TR bgColor=#e0e0e0 class=tableData id=tdt onclick=lightOn() ln="1">
<TD class=scheduleButtonVisible onclick=delIt() onmouseout=mouseOut()
onmouseover=mouseOver() ln="1" width="80"><FONT size=2>
<INPUT name=PLID type=hidden
value=54 ln="1">
<INPUT name=edit type=hidden value=0>
</FONT></TD>
<TD ln="1" width="559">
<INPUT class=tableData maxLength=100 name=medication
onkeyup=modifiedIt(this) size=58 value="like it?" ln="1">
</TD>
</TR>
<TR bgColor=#e0e0e0 class=tableData id=tdt onclick=lightOn() ln="2">
<TD class=scheduleButtonVisible onclick=delIt() onmouseout=mouseOut()
onmouseover=mouseOver() ln="2" width="80"><FONT size=2>
<INPUT name=PLID type=hidden
value=55 ln="2">
<INPUT name=edit type=hidden value=0>
</FONT></TD>
<TD ln="2" width="559">
<INPUT class=tableData maxLength=100 name=medication
onkeyup=modifiedIt(this) size=58 value="how about it?" ln="2">
</TD>
</TR>
<TR bgColor=#e0e0e0 class=tableData id=tdt onclick=lightOn() ln="3">
<TD class=scheduleButtonVisible onclick=delIt() onmouseout=mouseOut()
onmouseover=mouseOver() ln="3" width="80"><FONT size=2>
<INPUT name=PLID type=hidden
value=56 ln="3">
<INPUT name=edit type=hidden value=0>
</FONT></TD>
<TD ln="3" width="559">
<INPUT class=tableData maxLength=100 name=medication
onkeyup=modifiedIt(this) size=58 ln="3">
</TD>
</TR>
</TBODY>
</TABLE>
<SCRIPT>
allCount=4
</SCRIPT>
<TABLE align=center border=1 borderColorDark=white borderColorLight=gray
cellPadding=1 cellSpacing=1 class=controlPanel cols=4 rules=all width="100%"
nowrap>
<TBODY>
<TR>
<TD align=middle class=controlPanel onclick=newHospitalVisit()
onmouseout="this.className='controlPanel'"
onmouseover="this.className='controlPanelMouseOver'"><font size="2" face="仿宋_GB2312, 楷体_GB2312">添加一行</font></TD>
</TR>
<TR>
<TD align=middle class=controlPanel onclick=move(-1)
onmouseout="this.className='controlPanel'"
onmouseover="this.className='controlPanelMouseOver'"><font size="2" face="仿宋_GB2312, 楷体_GB2312">向上移动</font></TD>
</TR>
<TR>
<TD align=middle class=controlPanel onclick=move(1)
onmouseout="this.className='controlPanel'"
onmouseover="this.className='controlPanelMouseOver'"><font size="2" face="仿宋_GB2312, 楷体_GB2312">向下移动</font></TD>
</TR>
</TBODY>
</TABLE>
</DIV>
</FORM></body><p><b>Collected by 38JS.COM</b></p>
<html>
<head>
<title> 动态表格实例</title>
<style>
.curr {background-color:blue;color:white}
</style>
<script language="JavaScript">
var curRow = null;
function setrow(){
var e = event.srcElement;
if(e.tagName=="TD" && tab1.contains(e)){
curRow = e.parentNode;
updateRow();
}
else curRow=null;
}
function doEdit(bSave){
if(curRow==null) return;
var i;
for(var i=0; i<curRow.cells.length;i++){
if(bSave)
curRow.cells[i].innerText = document.getElementsByName("txt")[i].value;
else
document.getElementsByName("txt")[i].value = curRow.cells[i].innerText;
}
}
function doInsert(){
var r=tab1.insertRow();
for(var i=0; i<tab1.rows[0].cells.length;i++){
r.insertCell(i).innerText = document.getElementsByName("txt")[i].value;
}
curRow = r;
updateRow();
}
function doDelete(){
if(tab1.rows.length<2 || !curRow) return;
curRow.removeNode(true);
curRow=null;
updateRow();
}
function updateRow(){
var rows=tab1.rows;
for(var i in rows)
rows[i].className = (curRow==rows[i]) ? "curr" : ""
}
</script>
</head>
<body>
动态表格实例<br/>
<table id=tab1 border=1 width=500 onclick="setrow()">
<tr><td>00</td><td>01</td><td>02</td></tr>
<tr><td>10</td><td>11</td><td>12</td></tr>
<tr><td>20</td><td>21</td><td>22</td></tr>
<tr><td>30</td><td>31</td><td>32</td></tr>
</table>
<input name=txt><input name=txt><input name=txt><br/>
<button onclick="doEdit(false)">Edit</button>
<button onclick="doEdit(true)">Save</button>
<button onclick="doInsert()">Insert</button>
<button onclick="doDelete()">delete</button>
</body>
</html>
hoojo 2009-03-27
- 打赏
- 举报
<head><STYLE type=text/css>BODY {
BACKGROUND: white; COLOR: black; FONT-FAMILY: verdana,arial,helvetica; FONT-SIZE: 12px
}
.tableData {
BACKGROUND: white; BORDER-BOTTOM: white 1px dashed; BORDER-LEFT: white 1px dashed; BORDER-RIGHT: white 1px dashed; BORDER-TOP: white 1px dashed; COLOR: black; CURSOR: hand; FONT-FAMILY: verdana,arial,helvetica; FONT-SIZE: 12px
}
.tableDataSel {
BACKGROUND: #6090d0; BORDER-BOTTOM: #6090d0 1px dashed; BORDER-LEFT: #6090d0 1px dashed; BORDER-RIGHT: #6090d0 1px dashed; BORDER-TOP: #6090d0 1px dashed; COLOR: white; CURSOR: hand; FONT-FAMILY: verdana,arial,helvetica; FONT-SIZE: 12px
}
.tableDataHit {
BACKGROUND: #d0e0ff; BORDER-BOTTOM: #d0e0ff 1px dashed; BORDER-LEFT: #d0e0ff 1px dashed; BORDER-RIGHT: #d0e0ff 1px dashed; BORDER-TOP: #d0e0ff 1px dashed; COLOR: black; CURSOR: hand; FONT-FAMILY: verdana,arial,helvetica; FONT-SIZE: 12px
}
.tableDataOver {
BACKGROUND: #d0e0ff; BORDER-BOTTOM: #d0e0ff 1px dashed; BORDER-LEFT: #d0e0ff 1px dashed; BORDER-RIGHT: #d0e0ff 1px dashed; BORDER-TOP: #d0e0ff 1px dashed; COLOR: black; CURSOR: hand; FONT-FAMILY: verdana,arial,helvetica; FONT-SIZE: 12px
}
.controlPanel {
BACKGROUND: silver; COLOR: black; CURSOR: hand; FONT-FAMILY: verdana,arial,helvetica; FONT-SIZE: 14px
}
.controlPanelMouseOver {
BACKGROUND: #d0e0ff; COLOR: black; CURSOR: hand; FONT-FAMILY: verdana,arial,helvetica; FONT-SIZE: 14px
}
.delMouseOver {
BACKGROUND: #d0e0ff; COLOR: black; CURSOR: hand; FONT-FAMILY: verdana,arial,helvetica; FONT-SIZE: 14px
}
.scheduleButtonVisible {
BACKGROUND: silver; BORDER-BOTTOM: gray 1px dashed; BORDER-LEFT: white 1px dashed; BORDER-RIGHT: gray 1px dashed; BORDER-TOP: white 1px dashed; COLOR: black; CURSOR: hand; FONT-FAMILY: webdings; FONT-SIZE: 12px
}
</STYLE>
<SCRIPT language=javascript>
var modified=0
var currentLine=-1
var line=-1
function lightOn(ln)
{
if (ln==null)
ln=parseInt(event.srcElement.ln,10)
for (i=1;i<PLList.rows.length;i++)
if (tdt[i].ln==ln)
line=i
cln=currentLine
oldLine=-1
for (i=1;i<PLList.rows.length;i++)
if (tdt[i].ln==cln)
oldLine=i
if (line==oldLine)
return
//if td <0 then only clear all title
if (line>0)
{
document.all.tdt[line].className="tableDataHit";
document.ecform("medication")[line].className="tableDataHit";
if (oldLine>0)
{
document.all.tdt[oldLine].className="tableData";
document.ecform("medication")[oldLine].className="tableData";
}
currentLine=ln
}
}
function move(direc){
//向下移动direc行，并将移动到的行高亮度显示
if(line+direc<1 || (line+direc)>document.all.tdt.length-1) return;
var temp=document.ecform.medication[line].value;
document.ecform.medication[line].value=document.ecform.medication[line+direc].value;
document.ecform.medication[line+direc].value=temp
line+=direc;
lightOn(line);
}
function delIt()
{
line=parseInt(event.srcElement.ln,10)
if (line>0)
for (i=1;i<PLList.rows.length;i++)
if (tdt[i].ln==line)
{
if ( document.ecform.medication[i].value.length>0 )
if (!confirm("Are you sure you want to delete this record?"))
return
PLList.deleteRow(i)
}
}
function modifiedIt(field)
{
// field.value=checkText(field.value);
modified=1
line=parseInt(event.srcElement.ln,10)
if (line>0)
for (i=1;i<PLList.rows.length;i++)
if (tdt[i].ln==line)
document.ecform.edit[i].value=1
}
function newHospitalVisit()
{
newRow=PLList.insertRow(PLList.rows.length);
newRow.id="tdt";
newRow.ln=allCount;
newRow.bgColor="#e0e0e0";
newRow.className="tableData";
newRow.onclick=lightOn;
c1=newRow.insertCell(0);
c1.id="delItem";
c1.ln=allCount;
c1.className="scheduleButtonVisible";
c1.onclick=delIt;
c1.onmouseover=mouseOver;
c1.onmouseout=mouseOut;
c1.innerHTML="<input type=hidden name=PLID value=0><input type='hidden' name='edit' value=0>";
c2=newRow.insertCell(1);
c2.ln=allCount;
c2.innerHTML="<input type=text size=58 maxlength=100 name=medication ln="+allCount+" class=tableData onkeyup='modifiedIt()'>"
allCount++
}
function mouseOver()
{
event.srcElement.className="delMouseOver"
}
function mouseOut()
{
event.srcElement.className="scheduleButtonVisible"
}
</SCRIPT>
mike_24 2009-03-27
- 打赏
- 举报
呵呵,不错,学习了.
benjaminwu198818 2009-03-27
- 打赏
- 举报
楼上已经很好，不过用function delRow()
{
document.getElementById('tab').deleteRow(index)
}按照索引可以删除任意行，index可以用参数带进去…
一把编程的菜刀 2009-03-27
- 打赏
- 举报
怎么老有人问同一个问题？
不懂搜索
论坛都不知道问了N次了
不懂搜索
论坛都不知道问了N次了
luojihaidao 2009-03-27
- 打赏
- 举报
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script>
function add(){
var tab = document.getElementById('tab');
if(tab){
var tr = document.createElement('tr');
var td = document.createElement('td');
var td1 = document.createElement('td');
td.innerHTML ='cccc';
td.style.border = '1px red solid';
td1.innerHTML ='dddd';
td1.style.border = '1px red solid';
tr.appendChild(td);
tr.appendChild(td1);
tab.childNodes[0].appendChild(tr);
}
}
function del(){
var tab = document.getElementById('tab');
if(tab.childNodes[0].lastChild){
tab.childNodes[0].removeChild(tab.childNodes[0].lastChild);
}
}
</script>
</HEAD>
<BODY >
<table id='tab' style='border:1px red solid'>
<tr>
<td style='border:1px red solid'>aaa</td>
<td style='border:1px red solid'>bbb</td>
</tr>
</table>
<input type=button value=add onclick='add()'/>
<input type=button value=del onclick='del()'/>
</BODY>
</HTML>
