如何用js添加一个tr,tr中有多个td?

<html>
<head></head><script language="javascript">
function add()
{
 var myTable = document.getElementById("aa");
 var newRow = aa.insertRow(aa.rows.length);
 var newTd1 = newRow.insertCell(0);
 newTd1.innerText="lala"; 
 var newTd2 = newRow.insertCell(1);
 newTd2.innerText="^_^";
}
</script>
<body>
<form>
<input type="button" onclick="addline()" value="增加一行">
<table border="1" id="test"> 
 <tr>
  <td colspan="2"><input type="text" name="tt[]"></td>
 </tr>
</table>
<input type="submit">
</form>
<script>
function addline(content){
newline=document.all.test.insertRow();
newline.insertCell().innerHTML='<input type="text" name="tt[]"><input type="button" value="删除此行" onclick="del()">'}
function del(){
document.all.test.deleteRow(window.event.srcElement.parentElement.parentElement.rowIndex);
}
</script>
<input type="button" value="点我啊" onclick="add();">
<table id="aa" border="1" bordercolor="black" style="border-collapse: collapse" width="80%">
<tr>
<td width="50%">xixi</td>
<td width="50%">haha</td>
</tr>
</table></body>
</html>

解决方案 »

  1.   

    function AddNew(){
    var newRow;
    var newCell;
    newRow = table1.insertRow();
    newCell=newRow.insertCell();
    newCell.width="164";
    newCell=newRow.insertCell();
    newCell.width="164";
    newCell=newRow.insertCell();
    newCell.width="164";
    }
      

  2.   

    <html>
    <head>
    <title>code by meixx</title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <script language="javascript">
    var curRow=null;
    function selectRow(tr1){
    if(curRow)
    curRow.bgColor="#FFFFFF";
    tr1.bgColor="e7e7e7";
    curRow=tr1;
    }
    function addRow(src){
    var newrow = src.insertRow(src.rows.length-1);
    newrow.attachEvent("onclick",function(){selectRow(newrow);});
    newrow.height=20;
    var i=4;
    while(i--){
    var newcell = newrow.insertCell();
    switch(i){
    case 0: newcell.innerHTML= '<input type="button" onClick="javascript:delRow(this.parentElement.parentElement)" value="删除此行">';break;
    default: newcell.innerHTML=div1.innerHTML;break;
    }
    }
    }
    function delRow(src){
    src.parentElement.deleteRow(src.rowIndex);
    }
    </script>
    </head><body>
    <table id="tb" width="100%"  border="1" align="center" cellpadding="1" cellspacing="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%">四</th>
      </tr>
      <tr id="blankRow" onClick="addRow(this.parentElement)">
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
    </table>
    <div id="div1" style="display:none "><input id="txt" type="text" style="width:97%; background-color:#FFFFEF"></div>
    </body>
    </html>
      

  3.   

    <BODY>
    <SCRIPT LANGUAGE="JavaScript">
    function addRow(tbl)
    {
    var a = tbl.insertRow();
    a.id = "a" + tbl.rows.length;
    for(var i=0; i<tbl.rows[0].cells.length; i++)
    {
    var tc = a.insertCell();
    tc.innerText = " ";
    tc.onfocus = function()
    {
    this.parentElement.parentElement.parentElement.ct = this.parentElement;
    this.innerHTML = "<input type=\"text\" value=\"" + (this.innerText==" "?"":this.innerText) + "\" style=\"width:100%;height:100%;border:0;\" onblur=\"this.parentElement.innerText=(this.value==''?' ':this.value);\">";
    this.children[0].focus();
    };
    }
    }function delRow(tbl)
    {
    if(!tbl.ct) return;
    tbl.deleteRow(tbl.ct.rowIndex);
    tbl.ct = null;
    }</SCRIPT>
    <table border=1 id="tbl">
    <tr id=a1>
    <td>123</td>
    <td>456</td>
    </tr>
    </table>
    <input type="button" value="添加行" onclick="addRow(document.all.tbl);">
    <input type="button" value="删除行" onclick="delRow(document.all.tbl);">
    </BODY>
      

  4.   

    <table id="table1"><tr><td></td><td></td><td></td></tr></table><script>
    function AddNew(){
    var newRow;
    var newCell;
    newRow = table1.insertRow();
    newCell=newRow.insertCell();
    newCell.width="164";
    newCell=newRow.insertCell();
    newCell.width="164";
    newCell=newRow.insertCell();
    newCell.width="164";
    }
    AddNew();
    <script>
      

  5.   

    要是<TD>中还有个<SELECT>哩？
    有点麻烦．
      

  6.   

    <table id="table1"><tr><td></td><td></td><td></td></tr></table><script>
    function AddNew(){
    var newRow;
    var newCell;
    newRow = table1.insertRow();
    newCell=newRow.insertCell();
    newCell.width="164";
    newCell=newRow.insertCell();
             newCell.innerHTML="<select><option value='0'>0</option></select>"
    newCell.width="164";
    newCell=newRow.insertCell();
             newCell.innerHTML="<select><option value='1'>1</option></select>"
    newCell.width="164";
    }
    AddNew();
    <script>
      

  7.   

    　　　有什么麻烦？用innerHTML加就是·#￥
      

  8.   

    上面的那些javascript里面的各个设置td的innerHTML属性的代码里,按照你自己的要求来添加或者修改其他表单都可以的。