如何用按钮实现在表格的末尾增加一行和删除一行？很急，请高手热心帮忙！！

<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<TITLE></TITLE>
</HEAD>
<BODY onclick="addnew()">
点鼠标
<script>
function addnew()
{
var r = document.all.TableID.insertRow(document.all.TableID.rows.length)
var c
c = r.insertCell(0)
c.innerHTML = "条目："
c = r.insertCell(1)
c.innerHTML = '<input type="text">'
c = r.insertCell(2)
c.innerHTML = "链接： "
c = r.insertCell(3)
c.innerHTML = '<input type="text">'
}
</script>
<table id=TableID>
<tr>
<td>A</td><td>b</td><td>c</td><td>c</td>
</tr>
</table>
</BODY>
</HTML>

这是我做的，大概你可以用得着。
如何添加一个<select>项，我倒是没做过，如果你会了，e-mail给我：[email protected]<SCRIPT LANGUAGE="JavaScript"></script>
<body bgcolor="#EBEBEB" text="#000000" onload="init();"><table border="0" cellpadding="0" cellspacing="0" width="768" align="center">  <tr>     <td height=68 width="988">       <table border="0" cellpadding="0" cellspacing="0" height="68">        <tr>           <td width=64><img border="0" src="../images/j1.gif" width="64" height="68"></td>          <td background="../images/j2.gif" width="644" height="68" align=center>¸ö             ÈË µµ °¸ Â¼ Èë ´° ¿Ú-------¡¶Ñ§ÀúÑÝ±äÇé¿ö¡·</td>          <td width="60" height="68">             <div align="right"><img border="0" src="../images/j3.gif" width="60" height="68"></div>          </td>        </tr>      </table>    </td>  </tr>  <tr>     <td valign=top width="988">       <table border="0" cellpadding="0" cellspacing="0" width="100%">        <tr>           <td background="../images/j4.gif" width=17 height=280></td>          <td valign=middle height=280 width="733">             <form name="form1" method="get" action="save_xl_inf.jsp" >              <table width="100%" height="100" border="0" align="center" cellpadding="0" cellspacing="0">                <tr>                   <td height="86" align="center" ><table width="653" border="0" align="center" cellpadding="0" cellspacing="0" id="myTable">                      <tr>                         <td height="29" colspan="6" > <div align="left">                            <input type="button" name="add_line" value="  +  " onClick="javascript:addRow('myTable')"">                               <input type="hidden" name="zgbh" value="<%=request.getParameter("zgbh")%>" ><input type="hidden" name="xm" value="<%=request.getParameter("xm")%>" ></div></td>                      </tr>   <%

  %>
                      <tr>                         <td width="158" height="24" style="border-left: 2 solid #000000; border-right: 1 solid #000000; border-top: 2 solid #000000;border-bottom: 1 solid #000000"><div align="center">±ÏÒµÑ§Ð£</div></td>                        <td width="85" style="border-left: 1 solid #000000; border-right: 1 solid #000000; border-top: 2 solid #000000 ; border-bottom: 1 solid #000000"><div align="center">ÈëÑ§Ê±¼ä</div></td>                        <td width="79" style="border-left: 1 solid #000000; border-right: 1 solid #000000; border-top: 2 solid #000000; border-bottom: 1 solid #000000"><div align="center">±ÏÒµÊ±¼ä</div></td>                        <td width="117" style="border-left: 1 solid #000000; border-right: 1 solid #000000; border-top: 2 solid #000000; border-bottom: 1 solid #000000"><div align="center">ËùÑ§×¨Òµ</div></td>                        <td width="100" style="border-left: 1 solid #000000; border-right: 1 solid #000000; border-top: 2 solid #000000; border-bottom: 1 solid #000000"><div align="center">Ñ§ÀúÐÔÖÊ</div></td>                        <td width="114" style="border-left: 1 solid #000000; border-right: 2 solid #000000; border-top: 2 solid #000000; border-bottom: 1 solid #000000"><div align="center">Ñ§Î»</div></td>                      </tr>                    </table></td>                </tr>                <tr>                   <td height="45" align="center" ><input type="submit" name="Submit" value="    ËÍ    ³ö   ">                                                         <input type="reset" name="Submit2" value="     ÖØ     Ð´    "></td>                </tr>              </table>            </form>                     </td>          <td background="../images/j5.gif" width=18 height=280></td>        </tr>      </table>  </tr>  <tr>     <td height=19 width="988">       <table border="0" cellpadding="0" cellspacing="0" width="100%" height="19">        <tr>           <td width=18 height=20><img border="0" src="../images/j6.gif" width="18" height="19"></td>          <td background="../images/j7.gif" width=100% height=20></td>          <td width="18" height="20"><img border="0" src="../images/j8.gif" width="18" height="19"></td>        </tr>      </table>    </td>  </tr></table></body></html>

<html>
<head>
<title>test</title>
<script>
function tableOjb(obj)//只支持ie
{
this.evnt=document.getElementById(obj)||document.all[obj]//ie5以上支持dom格式的
if(!this.evnt)
{
alert("create obj failed!")
return false;
}
this.length = this.evnt.rows.length;
this.cellmaxlength =0;
for (var i=0;i<this.length;i++)
{
if (this.evnt.rows(i).cells.length>this.cellmaxlength)
this.cellmaxlength = this.evnt.rows(i).cells.length
}
this.css=this.evnt.style;
this.ref=document;
this.addrow = t_addrow;
this.delrow = t_delrow;
this.restoreTalbe = t_restoreTalbe;
this.obj = obj + "Object";
eval(this.obj + "=this");
return this;
}function t_addrow(index,num,html)
{
var insertIndex=-1;
var strHTML = "newtr"+this.length.toString();

if (index)
insertIndex =index;
if (html)
strHTML = html;
var oTR = this.evnt.insertRow(insertIndex);
var oTD ;
for (var i=0;i<num;i++)
{
oTD = oTR.insertCell();
oTD.innerHTML = ""
oTD.innerHTML = strHTML;
}
oTD.innerHTML = strHTML;

this.length++
if (num>this.cellmaxlength)
{
this.cellmaxlength = num;
this.restoreTalbe();
}
}
function t_delrow(index)
{
var insertIndex=this.length;

if (index)
insertIndex = index;

this.evnt.deleteRow(insertIndex);

this.length--
this.restoreTalbe(1);
}
function t_restoreTalbe(flag)//flag说明是被添加还是删除调用
{
var curColLength,totalCols=this.cellmaxlength;
if (flag)
{
for (var i=0;i<this.length;i++)
{
//curColLength = this.evnt.rows(i).cells.length;
//alert(this.evnt.rows(i).cells(curColLength-1).colSpan)
//获取最大cells.length，重置table;
alert("1")
}
}

for (var i=0;i<this.length;i++)
{
curColLength = this.evnt.rows(i).cells.length;
if (curColLength<totalCols)
this.evnt.rows(i).cells(curColLength-1).colSpan = totalCols-curColLength+1;

}}
</script>
</head>
<body>
<table  id="table1" width="100%" border=1>
<tr><td colspan=2>t1</td></tr>
<tr><td>t2</td></tr>
<tr><td>t3</td><td>adfadf</td></tr>
</table><script>
var table1 =  new tableOjb("table1")
</script>
<input type=button value="button" onclick="javascript:table1.addrow(1,3,'<b>hahah</b>')">
<input type=button value="button" onclick="javascript:table1.delrow(1)">
</body>
</html>

非常感谢孟子的及时解答，同时也感谢Tycoon_21st()和 RedDuke（孟子的就可以得到你所需要的^_^），后来我又找到了这样的例子，也许更有借鉴作用：*************************************************************
<HTML>
<HEAD>
<META content="text/html; charset=gb2312" http-equiv=Content-Type>
<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
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
}
还有

//一个例子，刚做完
<html>
<head>
<title>经营计划</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body  STYLE="background-color: transparent" bgcolor="#FFFFF0" text="#000000" leftmargin="0" topmargin="0">
<script language="javascript">
function insertRow(idx)
{
var objNewRow = window.plantable.insertRow(idx);

var objNewCell;
var sHtml;
var toDay = new Date();
var year = toDay.getFullYear();
var mnoth = toDay.getMonth()+1;
var newDate = year + "-" + mnoth  ;
var chsHtml;
//加入删除纪录的功能，我用图片，你可以换成按钮
objNewCell = objNewRow.insertCell();
sHtml = "<tr><td width='3%' ><img src='../image/del.gif' name='btnDelete'  width='14' border='0' alt='删除行' style='cursor:hand;' onclick='return btnDelete_onclick()'></td>";
objNewCell.innerHTML = sHtml; //计划序号
objNewCell = objNewRow.insertCell();
name = "planno";
idx=idx+1;
sHtml = "<td width='5%' valign='top'><input type='text' name=" + name + " value="+idx+" size='2' readonly style='height:32' class='scrolltext'></td>";
objNewCell.innerHTML = sHtml;
//计划内容
objNewCell = objNewRow.insertCell();
name =  "palncontent";
sHtml = "<td ><textarea name="+name+" cols='100' class='scrolltext'></textarea></td>";
objNewCell.innerHTML = sHtml;
//滚动到插入的当前行
objNewRow.scrollIntoView(true);

}
//添加条款
function btnAddNew_onclick()
{
    var ilen = window.plantable.rows.length;
    insertRow(ilen);
}
//删除条款
function btnDelete_onclick()
{
   var oSrc=window.event.srcElement;
   var idx = oSrc.parentElement.parentElement.rowIndex;
   window.plantable.deleteRow(idx);
   reCaclRowCount()
}
//对计划序号进行排序
function reCaclRowCount()
{
var objLength = window.plantable.rows.length;
if(objLength ==0)
{
return;
}
var collcell = window.plantable.all.item("planno");
if (collcell!=null)
{
    for (i=0; i<collcell.length; i++)
    {
      collcell[i].value=i+1;
  }
}
}
//检查字段是否为空
function check()
{
  //检查是否添加记录
  if(!checkisnull('plantable'))
  {
    alert('请添加计划');
    return false;
  }
  //只添加一条记录检查
  if(plantable.rows.length  == 1)
  {
    if(plantable.all.palncontent.value=="")
    {
      alert("请输入计划内容");
      return false;
    }
    return true;
  }
  //检查多条记录
  var collcell = plantable.all.item("palncontent");
  if (collcell!=null)
  {
    for (i=0; i< collcell.length; i++)
    {
      if(collcell[i].value=="")
      {
        alert("请输入计划内容");
        return false;
      }
}
  }
  return true;
}
//返回表格中的数据
function returnstring()
{
  var tempstring="";
  var result="";
  var sourcestr="";
  var obj=plantable.all;
  if(obj!=null)
  {
for(i=0;i<obj.length;i++)
{
if(obj[i].tagName=='INPUT' || obj[i].tagName =='TEXTAREA')
{
var sourcestr=obj[i].value;
while (sourcestr.indexOf("\r\n") >= 0)
{
sourcestr = sourcestr.replace("\r\n", "");
}
tempstring=obj[i].name+"="+sourcestr+"\n"+tempstring;
}

}
   }
  return tempstring;
}
//返回表格记录数
function rowcount()
{
  var objLength = window.plantable.rows.length ;
  return objLength;
}
</script>

<table id=plantable border="0" width="100%"  align="left" cellspacing=0
cellpadding=0 bordercolor="#408080"></table>
</body>
</html>

调试易

如何用按钮实现在表格的末尾增加一行和删除一行？很急，请高手热心帮忙！！

解决方案 »