怎样动态通过按钮添加一个table 中的tr和td呢！

var tr = table.insertRow();
var td = tr.insertCell();

不知道下面这段代码对你有没有帮助。<table width="100%" height="30" border="0" cellpadding="0" cellspacing="0" id="tab">
  <tr>
    <td width = "10%">姓   名1</td>
    <td width = "10%"><input type="text" name="txt" size="10"></td>
    <td width = "10%">性   别1</td>
    <td width = "10%"><input type="radio" name="rd" value="radiobutton">男<input type="radio" name="rd" value="radiobutton">女</td>
    <td width = "10%">选   择1</td>
    <td width = "10%"><input type="checkbox" name="ck" value="checkbox">选择</td>
    <td width = "10%">下拉框1</td>
    <td width = "10%">
<select name="select">
<option>下拉框</option>
    </select> </td>
    <td width = "20%"><input type="submit" name="sb" value="增加" onclick="addRows()"></td>
  </tr>
</table><script language="javascript">
var i = 1; //全局变量，用于控件的递增标号；
function addRows(){
i++;
var rows = tab.insertRow();
c1 = rows.insertCell();
c1.id = "iTD" + i;
c1.innerHTML = "姓   名" + i; c2 = rows.insertCell();
c2.innerHTML = "<input type='text' name='txt" + i + "' size='10'>";

c3 = rows.insertCell();
c3.innerHTML = "性   别" + i;

c4 = rows.insertCell();
c4.innerHTML = "<input type='radio' name='rd" + i + "' value='radiobutton'>男<input type='radio' name='rd" + i + "' value='radiobutton'>女";

c5 = rows.insertCell();
c5.innerHTML = "选   择" + i;

c6 = rows.insertCell();
c6.innerHTML = "<input type='checkbox' name='ck" + i + "' value='checkbox'>选择";

c7 = rows.insertCell();
c7.innerHTML = "下拉框" + i;

c8 = rows.insertCell();
c8.innerHTML = "<select name='select" + i + "'><option>下拉框</option></select>";

c9 = rows.insertCell();
c9.innerHTML = "<input type='button' value='删除' onclick='tab.deleteRow(iTD" + i + ".parentElement.rowIndex)'>";
}
</script>

<HTML>
<SCRIPT LANGUAGE="JScript">
function numberCells()
{
    var count=0;
    for (i=0; i < document.all.mytable.rows.length; i++)
     {
         for (j=0; j < document.all.mytable.rows(i).cells.length; j++)
        {
            document.all.mytable.rows(i).cells(j).innerText = count;
            count++;
        }
    }
}function tb_addnew()
{
    var ls_t=document.getElementById('mytable');
    maxcell =ls_t.rows(0).cells.length;
    mynewrow = ls_t.insertRow();

    for(i=0;i<maxcell;i++)
    {
      mynewcell = mynewrow.insertCell();
      mynewcell.innerText ="a"+i;
    }

}function tb_delete()
{
    var ls_t=document.getElementById("mytable");
    maxcell=ls_t.rows.length;    if(maxcell > 1)
    {
        ls_t.deleteRow() ;
    }
}</SCRIPT>
<BODY onload="numberCells()">
<TABLE id=mytable border=1>
<TR><TH> </TH><TH> </TH><TH> </TH><TH style="width: 127px"> </TH></TR>
<TR><TD style="height: 23px"> </TD><TD style="height: 23px"> </TD><TD style="height: 23px"> </TD><TD style="height: 23px; width: 127px;"> </TD></TR>
<TR><TD> </TD><TD> </TD><TD> </TD><TD style="width: 127px"> </TD></TR>
</TABLE>
<input type=button value="Ins Row" onclick="tb_addnew()">
<input type=button value="Del Row" onclick="tb_delete()" >
</BODY>
</HTML> 看看这个能不能对你有帮助把

各位辛苦大家了，我想要的表单是下边的<table>中的表生成。<table border="1" cellpadding="0" cellspacing="0" width="100%"  >
    <tr>
              <td width="18%" align="center" colspan="2"  ><b>PROJECT RECORD</b></td>
              <td width="12%" align="center"   colspan="2"><b>DISC</b></td>
              <td width="76%" align="center" colspan="9" ><b>MANHOURS</b></td>
  <td></td>
            </tr>
            <tr>
              <td width="9%" align="center" rowspan="2"><p align="center"><b>Project Number</b></td>
              <td width="8%" align="center" rowspan="2"><p align="center"><b>Client</b></td>
              <td width="9%" align="center" rowspan="2" colspan="2"> </td>
              <td width="6%" align="center" ><b>SAT</b></td>
              <td width="6%" align="center" ><b>SUN</b></td>
              <td width="6%" align="center" ><b>MON</b></td>
              <td width="6%" align="center" ><b>TUE</b></td>
              <td width="6%" align="center" ><b>WED</b></td>
              <td width="6%" align="center" ><b>THR</b></td>
              <td width="6%" align="center"><b>FRI</b></td>
              <td width="20%" align="center" ><b>REG HOURS</b></td>
              <td width="12%" align="center"  rowspan="2"><b>APPROVAL</b></td>
  <td rowspan="2"><b>ADD</b></td>
            </tr>
            <tr>

              <td width="6%" align="center" ><b>OT</b></td>
              <td width="6%" align="center" ><b>OT</b></td>
              <td width="6%" align="center" ><b>OT</b></td>
              <td width="6%" align="center" ><b>OT</b></td>
              <td width="6%" align="center" ><b>OT</b></td>
              <td width="6%" align="center" ><b>OT</b></td>
              <td width="6%" align="center" ><b>OT</b></td>
              <td width="20%" align="center" ><b>OT HOURS</b></td>
            </tr>              <tr>
              <td width="9%"  rowspan="2">
  <input type="text" name="ProjectNo_<%=i%>"  id="ProjectNo_<%=i%>" value="<%=rsData("ProjectNo")%>" <%=sReadOnly%> index=<%=i%>    size="9"  style="border-style: solid; border-width: 0">
</td>
              <td width="8%" align="center" rowspan="2"><span id="Client_<%=i%>"  ><%=rsData("Client")%></span></td>

           <td width="9%" align="center" rowspan="2" valign="middle" colspan="2"><div  id="ctr_show2_<%=i%>" style="display:">
    <input type="text" id="Txt_<%=i%>"   readonly value="<%=rsData("Profession")%>"   name="Txt_<%=i%>"  index=<%=i%>   size="16"><input type="button" name="T_<%=i%>"    value="..." disabled  > <input type="hidden" name='gid_<%=i%>' id='gid_<%=i%>' value="0">
</div></td>
              <td width="6%" align="center"><input type="text" name="SAT1_<%=i%>" id="SAT1_<%=i%>" index=<%=i%> value="<%=rsData("Sat1")%>" <%=sReadOnly%> onfocus="ProjNoCheck()" onblur="workhourChange(1)" size="4" style="border-style: solid; border-width: 0"></td>
              <td width="6%" align="center"><input type="text" name="SUN1_<%=i%>" id="SUN1_<%=i%>" index=<%=i%> value="<%=rsData("Sun1")%>" <%=sReadOnly%> onfocus="ProjNoCheck()" onblur="workhourChange(1)" size="4" style="border-style: solid; border-width: 0"></td>
              <td width="6%" align="center"><input type="text" name="MON1_<%=i%>" id="MON1_<%=i%>" index=<%=i%> value="<%=rsData("Mon1")%>" <%=sReadOnly%> onfocus="ProjNoCheck()" onblur="workhourChange(1)" size="4" style="border-style: solid; border-width: 0"></td>
              <td width="6%" align="center"><input type="text" name="TUE1_<%=i%>" id="TUE1_<%=i%>" index=<%=i%> value="<%=rsData("Tue1")%>" <%=sReadOnly%> onfocus="ProjNoCheck()" onblur="workhourChange(1)" size="4" style="border-style: solid; border-width: 0"></td>
              <td width="6%" align="center"><input type="text" name="WED1_<%=i%>" id="WED1_<%=i%>" index=<%=i%> value="<%=rsData("Wed1")%>" <%=sReadOnly%> onfocus="ProjNoCheck()" onblur="workhourChange(1)" size="4" style="border-style: solid; border-width: 0"></td>
              <td width="6%" align="center"><input type="text" name="THR1_<%=i%>" id="THR1_<%=i%>" index=<%=i%> value="<%=rsData("Thr1")%>" <%=sReadOnly%> onfocus="ProjNoCheck()" onblur="workhourChange(1)" size="4" style="border-style: solid; border-width: 0"></td>
              <td width="6%" align="center"><input type="text" name="FRI1_<%=i%>" id="FRI1_<%=i%>" index=<%=i%> value="<%=rsData("Fri1")%>" <%=sReadOnly%> onfocus="ProjNoCheck()" onblur="workhourChange(1)" size="4" style="border-style: solid; border-width: 0"></td>
              <td width="20%" align="center"><input type="text" id=RegHours_<%=i%> name=RegHours_<%=i%> size="4" readonly value="<%=rsData("Total1")%>" style="border-style: solid; border-width: 0"></td>
              <td width="12%" align="center" rowspan="2"><%ProjectManagerList "APPROVAL_"&i,rsData("SubmitApproval"),"UserName" %>
               <td align="center" rowspan="2"><input type="button" name="add" value="ADD"></td>
            </tr>
            <tr>
              <td width="6%" align="center"><input type="text" name="SAT2_<%=i%>" id="SAT2_<%=i%>" index=<%=i%> value="<%=rsData("Sat2")%>" <%=sReadOnly%> onfocus="ProjNoCheck()" onblur="workhourChange(2)" size="4" style="color: #FF0000; border-style: solid; border-width: 0"></td>
              <td width="6%" align="center"><input type="text" name="SUN2_<%=i%>" id="SUN2_<%=i%>" index=<%=i%> value="<%=rsData("Sun2")%>" <%=sReadOnly%> onfocus="ProjNoCheck()" onblur="workhourChange(2)" size="4" style="color: #FF0000; border-style: solid; border-width: 0"></td>
              <td width="6%" align="center"><input type="text" name="MON2_<%=i%>" id="MON2_<%=i%>" index=<%=i%> value="<%=rsData("Mon2")%>" <%=sReadOnly%> onfocus="ProjNoCheck()" onblur="workhourChange(2)" size="4" style="color: #FF0000; border-style: solid; border-width: 0"></td>
              <td width="6%" align="center"><input type="text" name="TUE2_<%=i%>" id="TUE2_<%=i%>" index=<%=i%> value="<%=rsData("Tue2")%>" <%=sReadOnly%> onfocus="ProjNoCheck()" onblur="workhourChange(2)" size="4" style="color: #FF0000; border-style: solid; border-width: 0"></td>
              <td width="6%" align="center"><input type="text" name="WED2_<%=i%>" id="WED2_<%=i%>" index=<%=i%> value="<%=rsData("Wed2")%>" <%=sReadOnly%> onfocus="ProjNoCheck()" onblur="workhourChange(2)" size="4" style="color: #FF0000; border-style: solid; border-width: 0"></td>
              <td width="6%" align="center"><input type="text" name="THR2_<%=i%>" id="THR2_<%=i%>" index=<%=i%> value="<%=rsData("Thr2")%>" <%=sReadOnly%> onfocus="ProjNoCheck()" onblur="workhourChange(2)" size="4" style="color: #FF0000; border-style: solid; border-width: 0"></td>
              <td width="6%" align="center"><input type="text" name="FRI2_<%=i%>" id="FRI2_<%=i%>" index=<%=i%> value="<%=rsData("Fri2")%>" <%=sReadOnly%> onfocus="ProjNoCheck()" onblur="workhourChange(2)" size="4" style="color: #FF0000; border-style: solid; border-width: 0"></td>
              <td width="20%" align="center"><input type="text" id=OtHours_<%=i%> name=OtHours_<%=i%> size="4" readonly value="<%=rsData("Total2")%>" style="border-style: solid; border-width: 0"></td>
            </tr>
</table>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>插入和删除表元</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
</head>
<body>
<center><h1>插入和删除表元</h1></center><p>

<table id="table1" border="1">
<tr id="row1">
<td id="cell1">表元1</td>
<td id="cell2">表元2</td>
</tr>
<tr id="row2">
<td id="cell3">表元3</td>
<td id="cell4">表元4</td>
</tr>
</table>
<script type="text/javascript">

</script>

<form name="testForm" id="testForm" action="#" method="get">

行号: <input type="text" name="rowtoinsert" id="rowtoinsert"
size="2" maxlength="2" value="1">

<input type="button" value="插入行"
onclick="doRowInsert(document.testForm.rowtoinsert.value);"><br>

行号: <input type="text" name="insertionRow" id="insertionRow"
size="2" maxlength="2" value="0">

列号: <input type="text" name="insertionColumn" id="insertionColumn"
size="2" maxlength="2" value="0">

<input type="button" value="插入列"
onclick="doCellInsert(document.testForm.insertionRow.value,
document.testForm.insertionColumn.value);"><br>

行号: <input type="text" name="modifyRow" id="modifyRow"
size="2" maxlength="2" value="0">

列号: <input type="text" name="modifyColumn" id="modifyColumn"
size="2" maxlength="2" value="0">

新内容: <input type="text" name="newContents" id="newContents"
size="20" maxlength="20" value="">


<input type="button" value="编辑表元内容"
onclick="doCellModification(document.testForm.modifyRow.value,
document.testForm.modifyColumn.value,
document.testForm.newContents.value);"><br>
行号: <input type="text" name="deletionRow" id="deletionRow"
size="2" maxlength="2" value="0">
列号: <input type="text" name="deletionColumn" id="deletionColumn"
size="2" maxlength="2" value="0">

<input type="button" value="删除表元"
onclick="doCellDelete(document.testForm.deletionRow.value,
document.testForm.deletionColumn.value);"><br>
</form>
</body>
</html>

调试易

怎样动态通过按钮添加一个table 中的tr和td呢！

解决方案 »