为表格增加行

最新推荐文章于 2019-08-28 20:05:06 发布

杠杠峰

最新推荐文章于 2019-08-28 20:05:06 发布

阅读量786

点赞数

CC 4.0 BY-SA版权

分类专栏： Javascript 文章标签： javascript list table class html

本文链接：https://blog.youkuaiyun.com/lmn13/article/details/5817112

Javascript 专栏收录该内容

24 篇文章

订阅专栏

本文介绍两种使用JavaScript动态填充HTML表格的方法。第一种方法通过创建新的行和单元格元素并设置其内容来填充表格。第二种方法则直接利用表格的insertRow和insertCell方法进行填充。此外，还介绍了如何进行行的删除及列的合并操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML 内容如下：

<pre> <%-- 角色列表 --%> <table id="RoleListTable" class="DataListTable"> <thead> <tr> <th>序号</th> <th>角色名称</th> <th>角色代码</th> <th>备注</th> <th>权限详细</th> <th>有效</th> <th>修改</th> </tr> </thead> <tbody id="Data_List_Container"> <tr> <td colspan="99">正在读取数据 ... </td> </tr> </tbody> <tfoot> </tfoot> </table> </pre>

第一种方式：

var tableRow = dojo.doc.createElement("tr"); var arrTD = new Array(7); // init array for( var j = 0; j < arrTD.length; j ++ ) arrTD[j] = dojo.doc.createElement("td"); arrTD[0].innerHTML = list[i].rowIndex ; arrTD[1].innerHTML = list[i].roleName.replace(keyWord,"<em>$1</em>") ; arrTD[2].innerHTML = list[i].roleCode.replace(keyWord,"<em>$1</em>") ; arrTD[3].innerHTML = list[i].noteInfo.replace(keyWord,"<em>$1</em>") ; arrTD[4].innerHTML = "<a href="javascript: showPrivilegeDialog(" + list[i].roleId + ");" mce_href="javascript: showPrivilegeDialog(" + list[i].roleId + ");">权限详细</a>" ; arrTD[5].innerHTML = list[i].isActive == "true" ? "是":"否" ; arrTD[6].innerHTML = "<a href="javascript: showUpdateRoleDialog(/"" + list[i].roleId + "/");" mce_href="javascript: showUpdateRoleDialog(/"" + list[i].roleId + "/");">修改</a>"; for( var j = 0; j < arrTD.length; j ++ ) tableRow.appendChild(arrTD[j]); dojo.byId("Data_List_Container").appendChild( tableRow );

第二种方式：

var tableBody = dojo.byId("Data_List_Container"); var row = tableBody.insertRow(-1); var arrCell = new Array(7); for( var j = 0; j < arrCell.length; j ++ ) arrCell[j] = row.insertCell(j); arrCell[0].innerHTML = list[i].rowIndex ; arrCell[1].innerHTML = list[i].roleName.replace(keyWord,"<em>$1</em>") ; arrCell[2].innerHTML = list[i].roleCode.replace(keyWord,"<em>$1</em>") ; arrCell[3].innerHTML = list[i].noteInfo.replace(keyWord,"<em>$1</em>") ; arrCell[4].innerHTML = "<a href="javascript: showPrivilegeDialog(" + list[i].roleId + ");" mce_href="javascript: showPrivilegeDialog(" + list[i].roleId + ");">权限详细</a>" ; arrCell[5].innerHTML = list[i].isActive == "true" ? "是":"否" ; arrCell[6].innerHTML = "<a href="javascript: showUpdateRoleDialog(/"" + list[i].roleId + "/");" mce_href="javascript: showUpdateRoleDialog(/"" + list[i].roleId + "/");">修改</a>";

附加内容，行的删除及列的合并：

var tableBody = dojo.byId("Data_List_Container"); for( var j = tableBody.rows.length; j > 0 ; j -- ) tableBody.deleteRow( j - 1 ); var row = tableBody.insertRow(-1); var cell = row.insertCell(-1); cell.colSpan = "99" ; cell.innerHTML = "正在读取数据 ... ";