Nothing is impossible for a willing heart

I belive I can

 

javascript动态增加一行,删除一行[转载]

<HTML>
<HEAD>
<META content="text/html; charset=gb2312" http-equiv=Content-Type>

<SCRIPT language=javascript>
var modified=0
var currentLine=-1//该变量似乎保存"ln"属性;lightOn函数中line记录实际行数
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("date")[line].className="tableDataHit";
document.ecform("diagnosis")[line].className="tableDataHit";
document.ecform("medication")[line].className="tableDataHit";
if (oldLine>0)
{
document.all.tdt[oldLine].className="tableData";
document.ecform("date")[oldLine].className="tableData";
document.ecform("diagnosis")[oldLine].className="tableData";
document.ecform("medication")[oldLine].className="tableData";
}
currentLine=ln
}
}
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.diagnosis[i].value.length>0 || document.ecform.medication[i].value.length>0 || document.ecform.date[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>del";
c2=newRow.insertCell(1);
c2.ln=allCount;
c2.innerHTML="<input type=text size=10 maxlength=10 name=date ln="+allCount+" class=tableData onkeyup='modifiedIt()'>"
c3=newRow.insertCell(2);
c3.ln=allCount;
c3.innerHTML="<input type=text size=25 maxlength=50 name=diagnosis ln="+allCount+" class=tableData onkeyup='modifiedIt()'>"
c4=newRow.insertCell(3);
c4.ln=allCount;
c4.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>
</HEAD>
<BODY bgColor=white>
<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  id=tdt>
<TH width="10%"><INPUT name=date type=hidden> Date
<TH width="30%"><INPUT name=diagnosis type=hidden>
color=white>Diagnosis
<TH width="60%"><INPUT name=medication type=hidden>
color=white>Medication
<TH width=10>X <INPUT name=PLID type=hidden> <INPUT name=edit
type=hidden></TH>
</TR>
<TR bgColor=#e0e0e0 class=tableData id=tdt onclick=lightOn() ln="1">
<TD class=scheduleButtonVisible onclick=delIt() onmouseout=mouseOut()
onmouseover=mouseOver() ln="1"><INPUT name=PLID type=hidden value=54
ln="1"> <INPUT name=edit type=hidden value=0>del</TD>
<TD ln="1"><INPUT class=tableData maxLength=10 name=date
onkeyup=modifiedIt(this) size=10 ln="1"></TD>
<TD ln="1"><INPUT class=tableData maxLength=50 name=diagnosis
onkeyup=modifiedIt(this) size=25 value="what do you think of it?"
ln="1"></TD>
<TD ln="1"><INPUT class=tableData maxLength=100 name=medication
onkeyup=modifiedIt(this) size=58 value="like it?" ln="1"></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=center class=controlPanel onclick=newHospitalVisit()
onmouseout="this.className='controlPanel'"
onmouseover="this.className='controlPanelMouseOver'">Add a New
Record, click here</TD>
</TR>
</TBODY>
</TABLE>
</DIV>
</FORM>
</BODY>
</HTML>


我觉得这种写法不怎么好.重用性差.现在一般都比较流行dhtml来做表格的增添删.其实dhtml的免费版本已经可以满足我们的一般要求了.当然,如果要
新增一些功能的话,可以直接改它的源代码.我们现在的做法就是自己改它的代码,增加自己想要的功能.dhtml我觉得唯一不好的就是,如果xml文件包含有&,/n,/t等字符的时候,dhtml加载xml时候,就出错了.

posted on 2006-09-29 21:47 JAVA_UFO 阅读(1734) 评论(2)  编辑  收藏 所属分类: javascript

评论

# re: javascript动态增加一行,删除一行[转载] 2012-10-12 17:19 zhangsan

呵呵呵
  回复  更多评论   

# re: javascript动态增加一行,删除一行[转载] 2012-10-12 19:57 张三他妹

@zhangsan
你是我的blog这么多年第一个雁过留毛的人,谢谢你的光临。  回复  更多评论   


只有注册用户登录后才能发表评论。


网站导航:
 

导航

统计

常用链接

留言簿(1)

随笔分类

随笔档案

文章分类

文章档案

搜索

最新评论

阅读排行榜

评论排行榜