在table中插入多行，能使用与insertAdjacentHTML相似的功能吗？

对于div等元素来说，插入一段html是很容易的事情，但是对于表格来说就太难了。一般情况下，我们都是用appendChild的方式，一行行、一格格地添加，操作起来很繁锁。能不能拼一串字符，就能直接加入到表格中呢？

　　下面的例子实现了这个功能，同样地，该例支持IE和firefox。该功能的实现意义重大，这样页面元素的处理，就全部都能够用拼html字串的方法来实现了。

1

插入行

function run(){
insTable(document.getElementById("tb1"),"

2 3

")
}
function insTable(tb,str){
var o=document.createElement("div"),ol
o.innerHTML="

"+str+"

"
ol=o.childNodes[0].tBodies[0].rows
while(ol.length>0){
tb.tBodies[0].appendChild(ol[0])
}
}

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

赞 (0)

相关推荐

  • 在table中插入多行的js代码(与insertAdjacentHTML相似的功能)

    1 插入行 var num = 1; function addRow() { num ++; InsertRow(tableList," "+num+"新行 "); } function InsertRow(table,rowHtml) { var o=document.createElement("div"),ol; o.innerHTML=" "+rowHtml+" " ol=o.childNodes[

  • 在table中插入多行，能使用与insertAdjacentHTML相似的功能吗？

    对于div等元素来说,插入一段html是很容易的事情,但是对于表格来说就太难了.一般情况下,我们都是用appendChild的方式,一行行.一格格地添加,操作起来很繁锁.能不能拼一串字符,就能直接加入到表格中呢? 下面的例子实现了这个功能,同样地,该例支持IE和firefox.该功能的实现意义重大,这样页面元素的处理,就全部都能够用拼html字串的方法来实现了. 1 插入行 function run(){ insTable(document.getElementById("tb1"),

  • 在antd Table中插入可编辑的单元格实例

    最近遇到一个需求,要求表格中某一属性是可以手动改变的.看了antd Table 的官方组件,发现不太灵活,所以自己动手写了一下. 实现的思路大同小异,在columns中插入Input,很简单的,直接render中返回就好,只是中间遇到小插曲,改变一个input的值所有的都跟着改变,原来是都定义成了同一个变量,后来家里一个动态的后缀.具体代码见贴图 补充知识:React+Ant Design实现可编辑单元格.添加行并利用form获取新增数据 实现如下图所示需求: 实现功能说明: 点击添加按钮,在表

  • sqlserver中向表中插入多行数据的insert语句

    下面把在sql吧里一位高手的解决方法,公布下.供大家参考: 假设有个表有 学号.姓名.学校 这三列 然后向这个表中插入 040501 孙明 山东大学 040502 李浩 山东师范 040503 王刚 烟台大学 怎么插入这三行数据啊~~~~~~~ 复制代码 代码如下: insert 表名 select '040504','孙明','山东大学' union select '040502','李浩','山东师范' union select '040503','王刚','烟台大学'

  • jquery获取table中的某行全部td的内容方法

    复制代码 代码如下: <table><tr class="PurViewData" id="trid95">    <td>14</td>    <td id="95"><a style="color:#0000CC" href="/PurviewManage/AddPurview?id=95">TopParty优惠</a>

  • SQL行号排序和分页(SQL查询中插入行号 自定义分页的另类实现)

    (一)行号显示和排序 1.SQL Server的行号 A.SQL 2000使用identity(int,1,1)和临时表,可以显示行号 SELECT identity(int,1,1) AS ROWNUM, [DataID] INTO #1 FROM DATAS order by DataID; SELECT * FROM #1 B.SQL 2005提供一个很好用的函数row_number(), 可以直接用来显示行号,当然也可以使用SQL 2000的identity SELECT row_num

  • jQuery实现获取table中鼠标click点击位置行号与列号的方法

    jQuery实现获取table中鼠标click点击位置行号与列号的方法

    本文实例讲述了jQuery实现获取table中鼠标click点击位置行号与列号的方法.分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码如下: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>www.jb51.net 鼠标点击位置行列号</title> </head> <bo

  • JavaScript遍历table表格中的某行某列并打印其值

    JavaScript遍历table表格中的某行某列并打印其值

    JavaScript遍历table 1.说明 遍历表格中的某行某列,并打印其值 2.实现源码 <!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">

  • 删除Table表中的重复行的方法

    删除Table表中的重复行的方法

    利用SQL Server 2005的新功能NOW_NUMBER和CTE可以很好的实现. 举例说明如下: 建立测试数据: 复制代码 代码如下: create table Dup1 ( Col1 int null, Col2 varchar(20) null ) insert into Dup1 values (1, 'aaa'), (2, 'aaa'), (2, 'aaa'), (2, 'aaa'), (3, 'bbb'), (3, 'bbb'), (4, 'ccc'), (4, 'ddd'),

  • jQuery实现table中的tr上下移动并保持序号不变的实例代码

    jQueryMoveTr.html 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>jQuery-bhang</TITLE> <script type="text/javascript" src="jquery-1.6.2.js"></sc

随机推荐