JS动态添加table行，HTML控件，获取HTML控件中信息

 

<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>

    <script language="javascript" type="text/javascript">
        //添加行
        function insertRow()
        {
            newRow=document.all.yltable.insertRow(-1);
            var j_1=document.all.yltable.rows.length;
            newcell=newRow.insertCell();
           
            newRow.bgColor='#FFFFFF';
            newcell.align='center';
            newcell.innerHTML=""+j_1+"";
            newcell=newRow.insertCell();
           
           
            newRow.bgColor='#FFFFFF';
            newcell.align='center';
            newcell.innerHTML="<input type='text' name='ylText"+j_1+"' id='ylText"+j_1+"'/>";
            newcell=newRow.insertCell();
           
            newRow.bgColor='#FFFFFF';
            newcell.align='center';
            newcell.innerHTML="<input type='text' name='hei"+j_1+"' id='hei"+j_1+"' />";
            newcell=newRow.insertCell();
           
            newRow.bgColor='#FFFFFF;';
            newcell.align='center';
            newcell.innerHTML='<input name="button3" type="button" value="删除" onclick="return DelRow()"> <input name="btnAdd" type="button" value="添加" onclick="AddInfo('+j_1+')">';
            document.all.yltable.focus();
        }
        function DelRow()
        {
            var currRowIndex=event.srcElement.parentNode.parentNode.rowIndex;
            document.all.yltable.deleteRow(currRowIndex);
        }
        function AddInfo(id)
        {
            window.location.href="tableText1.aspx?hei="+$("#hei"+id).val()+"&ylText="+$("#ylText"+id).val();
           
        }
    </script>

 

<div>
        <input type="button" name="AddRow" id="AddRow" value="添加一行" onclick="insertRow()" />
        <table border="1" align="center" width="50%" id="yltable">
            <tbody id="yl1">
                <tr>
                    <td height="22" class="style1">
                        <div align="center">
                            1</div>
                    </td>
                    <td width="40%">
                        <div align="center">
                            <input name="textfield" type="text" value="">
                        </div>
                    </td>
                    <td width="40%">
                        <div align="center">
                            <input name="textfield" type="text" value="">
                        </div>
                    </td>
                    <td width="30%">
                        <div align="center">
                            <input name="button3" type="button" value="删除" onclick="return DelRow()">
                        </div>
                    </td>
                </tr>
            </tbody>
            <tbody id="yl2">
                <tr>
                    <td class="style1">
                        <div align="center">
                            2</div>
                    </td>
                    <td>
                        <div align="center">
                            <input name="textfield2" type="text" value="">
                        </div>
                    </td>
                    <td>
                        <div align="center">
                            <input name="textfield2" type="text" value="">
                        </div>
                    </td>
                    <td>
                        <div align="center">
                            <input name="button3" type="button" value="删除" onclick="return DelRow()">
                        </div>
                    </td>
                </tr>
            </tbody>
            <tbody id="yl3">
                <tr>
                    <td class="style1">
                        <div align="center">
                            3</div>
                    </td>
                    <td>
                        <div align="center">
                            <input name="textfield22" type="text">                        

 </div>
                    </td>
                    <td>
                        <div align="center">
                            <input name="textfield22" type="text" >
                        </div>
                    </td>
                    <td>
                        <div align="center">
                            <input name="button3" type="button" value="删除" onclick="return DelRow()">
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>