知识大全 javascript 手动给表增加数据的小例子

Posted 2022-07-20 知

篇首语：亦余心之所善兮，虽九死其犹未悔。本文由小常识网(cha138.com)小编为大家整理，主要介绍了知识大全 javascript 手动给表增加数据的小例子相关的知识，希望对你有一定的参考价值。

这篇文章介绍了js手动给表增加数据的实例代码有需要的朋友可以参考一下

　　先建一个页面如下这里有两个表上面一个有数据下面一个没有数据只有一个表头！

复制代码代码如下: <body> <form id="form " runat="server"> <div> <table border= px width= px id="tables"> <tr> <td> </td><td><input type=text value=" " /><input type=text value=" " /></td><td>我是中国人</td><td>好好学习< /td><td><input type=button id="but" value="新增" onclick="butd(this);" /></td> </tr> <tr> <td> </td><td><input type=text value=" " /><input type=text value=" " /></td><td>我是中国人</td><td>好好学习< /td><td><input type=button id="Button " value="新增" onclick="butd(this);" /></td> </tr> <tr> <td> </td><td><input type=text value=" " /><input type=text value=" " /></td><td>我是中国人</td><td>好好学习</td><td><input type=button id="Button " value="新增" onclick="butd(this);" /></td> </tr> <tr> <td> </td><td><input type=text value=" " /><input type=text value=" " /></td><td>我是中国人</td><td>好好学习< /td><td><input type=button id="Button " value="新增" onclick="butd(this);" /></td> </tr> <tr> <td> </td><td><input type=text value=" " /><input type=text value=" " /></td><td>我是中国人</td><td>好好学习< /td><td><input type=button id="Button " value="新增" onclick="butd(this);" /></td> </tr> </table> </div> <div> <table border= px width= px id="table "> <tr><td>ID</td><td>年龄</td><td>金钱</td><td>名字</td></tr> </table> </div> </form> </body>

　　现在点击新增按钮把点中的当前行的数据动态的加到下面的TABLE中 javascipt代码如下

复制代码代码如下: <script type=text/javascript> function butd(rows) var rows = rows parentNode parentNode rowIndex //找到当前选中的行 var mytable = document getElementById( tables ); //找到当前这个 table; var Romm_price = mytable rows[rows] cells[ ] innerText; //找到当前行的第一列的值 var room_rows = mytable rows[rows] cells[ ] children[ ] value; //找到当前行的第二列第一个文本框的值; var room_rows = mytable rows[rows] cells[ ] children[ ] value; //找到当前行的第二列第二个文本框的值; var room_rows = mytable rows[rows] cells[ ] innerText; //找到当前行的第三列的值; //找到table 并给table 新增一行 var x = document getElementById( table ) insertRow(); x align = "center"; //设置行样式 var Romm_typename = x insertCell( ); var txtDate = x insertCell( ); var Guest_Type_ID = x insertCell( ); var room_row = x insertCell( ); Romm_typename innerHTML = Romm_price; txtDate innerHTML = room_rows; Guest_Type_ID innerHTML = room_rows ; room_row innerHTML = room_rows ; </script> cha138/Article/program/Java/JSP/201311/20063