源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

js添加table的行和列 具体实现方法

  • 时间:2022-05-03 03:16 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:js添加table的行和列 具体实现方法
[u]复制代码[/u] 代码如下:
<!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>     <script language="javascript" type="text/javascript">         function addRow() {             var newTR = document.getElementById("testTable").insertRow(document.getElementById("testTable").rows.length);             var newNameTD = newTR.insertCell(0);             newNameTD.innerHTML = "aa";             var newNameTD = newTR.insertCell(1);             newNameTD.innerHTML = "<input name='LastName' id='LastName' type='text' />";             var newNameTD = newTR.insertCell(2);             newNameTD.innerHTML = "<input name='BirthDay' id='BirthDay' type='text'   />";             var newNameTD = newTR.insertCell(3);             newNameTD.innerHTML = "<input name='age' id='age' type='text'    />";         }         function insertRow() {             var oTable = document.getElementById("table_info");             var oTr = oTable.insertRow();             var oTd = oTr.insertCell();             oTd.innerHTML = "新添加了一行";         }         function insertRow2() {             //获取table对象             var table = document.getElementById("table_info2");             //找到要添加button的td,这里以表格第一行第一列为例子             var oTd = table.rows[0].cells[0];             //添加button到td中,添加前吧td内容清空并赋予button的代码             oTd.innerHTML = "<button onclick='insertRow22()'>添加收费</button>";         }         function insertRow22() {             var oTable = document.getElementById("table_info2");             var oTr = oTable.insertRow();             var oTd = oTr.insertCell();             oTd.innerHTML = "新添加了一行";         }         function insertRow3() {             //获取table对象             var table = document.getElementById("table_info3");             //找到要添加button的td,这里以表格第一行第一列为例子             var oTd2 = table.rows[0].insertCell();             oTd2.innerHTML = "&nbps;";         }         function tableDiv() {             var maxRow = 4;             var maxCol = 8;             var strTbody = ["<table border='1'><tbody>"];             for (var i = 0; i < maxRow; i++) {                 strTbody.push("<tr>");                 for (var j = 0; j < maxCol; j++) {                     strTbody.push("<td>test</td>");                 }                 strTbody.push("</tr>");             }             strTbody.push("</tbody></table>");             var obj = document.getElementById("tableDiv");             obj.innerHTML = strTbody.join("");         }         function init() {             var _table, _tbody, tr, td, text, maxRow, maxCol;             var docBody = document.body;             var _doc = document;             maxRow = 5;             maxCol = 8;             _table = _doc.createElement("table");             _table.border = "1";             _table.style.tableLayout = "fixed";             _tbody = _doc.createElement("tbody");             _table.insertBefore(_tbody, null);             docBody.insertBefore(_table, null);             for (var i = 0; i < maxRow; i++) {                 tr = _doc.createElement("tr");                 _tbody.insertBefore(tr, null);                 for (var j = 0; j < maxCol; j++) {                     td = _doc.createElement("td");                     text = _doc.createTextNode("Text");                     td.insertBefore(text, null);                     tr.insertBefore(td, null);                 }             }         }     </script> </head> <body>     <div>         <table id="testTable" border='1' cellspacing="1">             <tr>                 <th>                     FirstName                 </th>                 <th>                     LastName                 </th>                 <th>                     BirthDay                 </th>                 <th>                     age                 </th>             </tr>             <tr>                 <td>                     Jim                 </td>                 <td>                     Green                 </td>                 <td>                     L.A                 </td>                 <td>                     23                 </td>             </tr>             <tr>                 <td>                     Andrew                 </td>                 <td>                     Hou                 </td>                 <td>                     Xi'an                 </td>                 <td>                     25                 </td>             </tr>         </table>         <input type="button" id="aaa" value="+add new Row" onclick="addRow();" />     </div>     <br />     <hr />     <br />     <div>         <input type="button" value="按钮添加行" onclick="insertRow();" />         <table id="table_info" border="1">             <tr>                 <th>                     Name                 </th>                 <th>                     Age                 </th>             </tr>         </table>     </div>     <br />     <hr />     <br />     <div>         <input type="button" value="按钮中添加行" onclick="insertRow2();" />         <table id="table_info2" border="1">             <tr>                 <th>                     Name                 </th>                 <th>                     Age                 </th>             </tr>         </table>     </div>     <br />     <hr />     <br />     <div>         <input type="button" value="连续添加列" onclick="insertRow3();" />         <table id="table_info3" border="1">             <tr>                 <th>                     Name                 </th>                 <th>                     Age                 </th>             </tr>         </table>     </div>     <br />     <hr />     <br />     <div>         <input type="button" value="添加一个table" onclick="tableDiv();" />         <div id="tableDiv" />     </div>     <br />     <hr />     <br />     <div>         <input type="button" value="连续添加table" onclick="init();" />     </div> </body> </html>
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部