在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[0].tBodies[0].rows
while(ol.length>0){
table.tBodies[0].appendChild(ol[0])
}
}

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

Table的 tBodies属性是一个JS中的集合，而不是数组，没有sort()方法，所以不能用来直接排序。

赞 (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获取新增数据 实现如下图所示需求: 实现功能说明: 点击添加按钮,在表

  • 40行原生js代码实现前端简易路由

    目录 前言 路由到底是一个什么东西? 实现一个 hashRouter historyRouter memoryRouter 最后做个总结 前言 在使用Vue或者是React 的路由的时候,不是很清楚他们的思路,导致在理解这些思想上出现了很多问题,于是自己实现了一个简易的原生js实现的前端路由,并整理了一下前端会遇到的集中路由模式和区别, 来帮助学习路由 路由到底是一个什么东西? 路由(routing)就是通过互联的网络把信息从源地址传输到目的地址的活动.路由发生在OSI网络参考模型中的第三层即网

  • 关于网页中的无缝滚动的js代码

    关于网页中的无缝滚动的js代码

    随便打开一个网页,基本上都会看到无缝滚动或者轮播图,比如淘宝还有360官网的首页 观察这些轮播图可以发现图片可以来回循环地切换,那么是怎样做到的呢? 做到轮播图或者说无缝滚动主要有两种方式,一种是通过对图片的明暗即透明图的改变来显示或隐藏图片,另一种是通过运动框架,将图片显示在可视区域.这两种方式都会用到同一个东西,那就是定时器. JavaScript中的定时器有两种,1.setInterval();2.setTimeout();相对应的关闭定时器也有两种方法,clearInterval()和c

  • 微信小程序12行js代码自己写个滑块功能(推荐)

    效果图如下所示 .wxml <view class="jindu" bindtap="cuin"> <view class="xian" style="width:{{towards}}px;"> <view class="yuan" bindtouchmove='touchMove'></view> </view> </view> &

  • JS代码实现电脑配置检测功能

    下面一段代码给大家分享js代码实现电脑配置检测功能,具体代码如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <style type="text/css"> h1 { text-align: center; color: #000046; } .i { di

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

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

  • tinyMCE插件开发之插入html,php,sql,js代码 并代码高亮显示

    下面就是我开发的过程. 首先,我的 tinyMCE版本是 Version: 3.2.7 (2009-09-22) .下载地址 http://www.jb51.net/codes/17198.htmltinyMCE插入代码,需要调用 tinyMCE的 tinyMCE.execCommand('mceInsertContent',false,value); 方法.其中参数无需改变,value 就是你要插入的内容, 比如我写了一个函数, 复制代码 代码如下: function InsertHTML(v

  • 键盘上下键移动选择table表格行的js代码

    键盘上下键移动选择table表格行的js代码

    //这是要操作的表格: 这是第一行 这是第二行 这是第三行 这是第四行 //这是操作表格的代码 var rowNo= -1; var tableId = 'tb'; var inputId = 'show'; var selectedColor = "#FF0000" function document.onkeydown() { //事件的标识代码 if (event.keyCode == 38) { for(var k=0;k [Ctrl+A 全选 注:如需引入外部Js需刷新才能执

随机推荐