首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何将appendChild作为tbody中的第一行,并使用Javascript/Jquery拥有自己的tbody

要将appendChild作为tbody中的第一行,并使用Javascript/Jquery拥有自己的tbody,可以按照以下步骤进行操作:

  1. 创建一个新的tbody元素,并将其存储在一个变量中,例如newTbody
  2. 使用appendChild方法将newTbody添加到表格中,作为tbody的第一个子元素。
  3. 将原始的tbody元素存储在另一个变量中,例如oldTbody
  4. 使用jQuery的detach方法将oldTbody从表格中移除。
  5. newTbody重命名为原始的tbody元素的id或class,以保持与原始代码的一致性。

下面是一个示例代码:

代码语言:javascript
复制
// 创建一个新的tbody元素
var newTbody = document.createElement('tbody');

// 将newTbody添加到表格中作为第一个子元素
var table = document.getElementById('yourTableId'); // 替换为你的表格id
table.insertBefore(newTbody, table.firstChild);

// 获取原始的tbody元素
var oldTbody = document.getElementById('yourOldTbodyId'); // 替换为你的原始tbody的id

// 使用jQuery的detach方法将oldTbody从表格中移除
$(oldTbody).detach();

// 将newTbody重命名为原始tbody元素的id或class
newTbody.id = 'yourTbodyId'; // 替换为你的tbody的id或class

这样,你就可以使用appendChild方法将新的tbody作为第一行添加到表格中,并使用Javascript/Jquery拥有自己的tbody。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

如何用原生 DOM API 生成表格

在下面的教程,我们将了解如何使用 JavaScript 生成表格,而无需依赖任何库或框架。...然后是tbody(表体) 包含一堆 tr(表格)。每个表格行包含一定数量 td元素(表格单元格)。 有了这些要求,就可以开始编写 JavaScript 文件了。...有了这些知识,接下来在我们文件创建一个函数,将 table 作为参数。...填充表头工作只做了一半,可以看到表头中填充了一堆 th。每个表头必须映射到对象描述数据组成 key 上。 信息已经存在于数组 mountains 第一个对象内部。...实际上**每个认真的 JavaScript 开发人员都应该知道原生 DOM API,以及如何使用 JavaScript 操作 DOM **。这些问题在技术面试很容易被问到,你不想因此被拒绝吧?

2K20

JS-DOM 综合练习-动态添加删除班级成绩表

费了2个小时,才把原理弄懂,把问题逐个解决,当你发现你最后栽那个点,是一个小石头拌你,你起来是该哭还是该笑呢?只怪自己习武不精吧。...很明显,不行,即使放到下面,也是只有加载进来这两html已经写好tr会执行变色函数,你利用添加button后添加还是不能调用。...,那么就把变色函数封装到一个函数,放到最下面,然后window.onload还是在最上面,以保证页面加载完成后首先调用函数让已经存在能够执行变色命令,但是封装变色函数除了在window.onload...,后来想想,直接把i初始值改为1,把第一排除掉不就行了。...for(var i = 1; i < tr.length; i++) { //1-1解决:i=1,是为了排除第一表头,你可以把i=0,然后把鼠标放到学号那一,就知道为什么改1了 tr[i

3.7K80

JavaScript DOM操作表格及样式

集合指定位置插入一 元素添加属性和方法 属性或方法 说明 rows 保存着元素中行HTMLCollection deleteRow(pos) 删除指定位置 insertRow...(pos) 向rows集合指定位置插入一返回引用 元素添加属性和方法 属性或方法 说明 cells 保存着元素单元格HTMLCollection deleteCell(...);//获取第一单元格数量 //按HTML DOM来获取表格主体内第一第一个单元格内容(td) alert(table.tBodies[0].rows[0].cells[0].innerHTML...);//获取第一第一个单元格内容 //按HTML DOM来删除标题、表头、表尾、、单元格 table.deleteCaption();//删除标题 table.deleteTHead();//删除...'数据2')); document.body.appendChild(table); 注意:在创建表格时候、、没有特定方法,需要使用document来创建。

3.5K100

三峡大学复杂数据预处理day01-day03

:overline;} {text-decoration:line-through;} {text-decoration:underline;} 文本缩进:文本缩进属性是用来指定文本第一缩进...该语句以 var 开头,使用逗号分隔变量即可: var name="Gates",age=56, job="CEO"。 数据类型: JavaScript 拥有动态类型。...JavaScript 能够改变页面所有 HTML 元素 JavaScript 能够改变页面所有 HTML 属性 JavaScript 能够改变页面所有 CSS 样式...有三种方法来做这件事: 通过 id 找到 HTML 元素 :getElementById()返回对拥有指定 id 第一个对象引用。...它拥有自己独特语法以及一个独立处理引擎,在提供了正则表达式语言里,正则表达式语法都是一样。正则表达式使用单个字符串来描述、匹配一系列符合某个句法规则字符串搜索模式。

20240

JS常用操作

) 第四步: 书写定时器函数(获取广告图片位置设置属性styledisplay值block) 第五步:清除显示图片定时操作() 第六步:书写隐藏图片定时操作 第七步:书写定时器函数(获取广告图片位置设置属性...Tbody里面的行数(rows.length) JS遍历(for循环) 获取奇数和偶数(对遍历角标对2取余) 设置背景颜色(.style.backgroundColor) 3.步骤分析 第一步:...确定事件(onload)并为其绑定一个函数 第二步:书写函数(获取表格) 第三步:获取tbody里面的行数 第四步:对tbody里面的行进行遍历 第五步:获取奇数和偶数(角标对2取余) 第六步:分别对奇数和偶数设置背景颜色...、 5.实现一个表格高亮显示 为了加强对事件学习,添加此案例: 分析: 第一步:确定事件(onmouseover和onmouseout)分别为其绑定一个函数 第二步:获取鼠标移上去那行,对其设置背景颜色...元素 element.appendChild() 向元素添加新子节点,作为最后一个子节点。

8.1K10

如何在DataGrid里面产生滚动条而不滚动题头

为了可以滚动DataGrid我们需要一个可以让客户端Table滚动js脚本(该js代码我是从CodeProject上面下载),但又不能滚动Table题头(也就是第一)。...我们都知道DataGrid在解释到客户端以后将会生成一个Table,但是这个Table是由组成,我们脚本里面是需要使用到TableThead和Tbody(在大多数客户端应用中都要用到此功能比如...由于此方法只是由该控件自己使用所以我们将它设置成私有的代码如下:  private string parseMarkup(){          // 插入THead标签和TBody标签         ...         // 将第一个tr闭区间用Thead包起来,现在第一个已经画出来了需要画          // 它结尾和,同样找到第一个</tr...使用该方法可以实现客户端排序和托拽功能,只要你找到相应js代码(或者自己写)然后使用此法分析你客户端代码,最后将你DataGrid输出定位成你想要结果,一切就OK了!

1.5K110

如果你要学JS——我正走在JS路上(七)

①本篇介绍如何进行对删除节点操作和使用,以及对动态表格创建和区别分别进行了相应操作展现(附相关代码) ②如何进行节点删除以及动态表格创建 ③了解三种动态元素创建区别 1.如何删除节点 使用node.removeChild...()方法从DOM删除一个子节点,返回删除节点。...②所有的数据都是放到tbody里面的里面。...③因为很多,我们需要循环创建多个(对应多少人) ④每个里面又有很多单元格(对应里面的数据) , 继续使用循环创建多个单元格,并且把数据存入里面(双重for循环) ⑤最后一列单元格是删除,需要单独创建单元格...注: 标签表格主体(正文)。该标签用于组合 HTML 表格主体内容。tbody 元素应该与 thead 和 tfoot 元素结合起来使用。 3.2相关代码 <!

17500

javascript dom学习笔记

下一个兄弟:nextSibling,返回元素下一个元素节点对象     这里有个需要注意地方:对于表格,也就是table元素,它第一个儿子是tbody,而不是tr,不管你有没有在table...下面定义     这个tbody,table第一个儿子都是tbody,孙子才是tr。     ...--       需求:实现表格基数跟偶数背景色不一致,支持年龄一列排序功能       思路:       1,定义一个表格,添加数据       2,表格要实现奇偶背景色不一致,需要在文档加载完毕后对表格背景色进行设置...,所以需要在onload事件进行处理       3,需要获取到所有的对奇偶背景色进行处理       4,对于排序需要拿到所有的对象后,将需要排序行装进一个数组,按照每一中年龄列数值大小对数组数据进行排序后将... orignalClass;           //显示奇偶不同行背景色,添加高亮效果           function lineBg(){               //获取到表格所有的对象

1.8K10

「Web编程API」- 03

tbody 里面创建行: 有几个人(通过数组长度)我们就创建几行 var tbody = document.querySelector('tbody'); // 遍历数组 for (var i =...创建 tr var tr = document.createElement('tr'); tbody.appendChild(tr); // 2....里面创建单元格td 单元格数量取决于每个对象里面的属性个数 // 使用for in遍历学生对象 for (var k in datas[i]) { // 创建单元格...事件委托也称为事件代理,在 jQuery 里面称为事件委派。 说白了就是,不给子元素注册事件,给父元素注册事件,把处理代码在父元素事件执行。...事件委托作用 我们只操作了一次 DOM ,提高了程序性能。 动态新创建子元素,也拥有事件。 知否知否,点我应有弹框在手!

1.4K50

接口测试平台代码实现106:登录态接口-2

而因为这个接口一个项目基本也就设置一次,所以优化便利性这种事优先级不高,精力还是留给那些使用频率高功能上吧 首先是div样式和标题。...标题虽然没啥大用,但是起个提示效果, 然后是 请求方式/url/调试按钮那一。...,如果之后使用中出现bug,请及时反馈哦~ 目前显示均正常,除了form-data和x-www....那俩表格,那俩表格需要我们之后函数中进行初始化才会正常。...这俩个按钮我们照样放在右上角,所以位置应该是在h4标题之上,div第一个子属性,并且是float属性: 注意onclick调用函数,也要加login_ ,效果如下: 然后我们还需要一个最重要部分...我觉得就在返回体上开刀即可: 返回体目前是一个超大显示框,很浪费,我们给它拆成三份:(要想各个元素显示在同一,就用ul+li标签搞定,作者曾经走了不少弯路 才找到这个方法。)

92350

table自定义排序

实际上表格排序就是把要排序那列(或),值存在一个数组,然后对数组用比较函数进行排序,然后再对表格内容进行替换....这三个是表格自身就拥有的,不是自己创造;)这样就更直观了.当点击thead里面tr里td后,触发排序事件,将tbody某列进行排序. 2)统一排序函数....为了代码简易,整个表格排序用一个函数,不同列排序只是传递参数不同;比如,第一列传1, 第二列则传2;但因为每列数据类型可能不同,所以要进行判断.而且要将数据转换成可比较类型.甚至可以通过传参数不同获得不同比较函数...; 3)将要排序列获取到,放在数组; 为了程序简单,可以直接把tr放在数组,然后在比较函数中进行取值.将tr放在数组时不会从表格删除tr元素.因为仅仅存储了指针,并不是实际元素. 4...)排序 对数组里数据类型进行判断,然后根据类型,进行转换,转成可转换类型;然后用自己比较函数进行比较;得到排好序数组; 5)按已排序数组生成新表格; 6)创建文档碎片,将新表格绑定在碎片一

96720
领券