两种javascript动态创建table表格的方法,分享给大家,具体实现如下
方法一: 最原始的方法,创建一一元素
var a1=document.createElement("table");
var a2=document.createElement("tbody");
var a3=document.createElement("tr");
var a4=document.createElement("td");
//开始appendchild()追加各个元素
a3.appendChild(a4);
a2.appendChild(a3);
a1.appendChild(a2);
方法二:利用table对象里面含有的函数:插入行和插入列
var tabNode=document.createElement("table");
var trNode=tabNode.insertRow();
var tdNode=trNode.insertCell;
tabNode.innerHTML="这是采用table对象里面的函数创建的"
注意:利用原始方法,一个个createElement时候,必须要添加一个tbody对象
//获取 标签的兄弟节点
// var node3=tabnode.previousSibling;//前一个节点 获取对此对象的上一个兄弟对象的引用。
// alert("previous--node3:"+node3);//#text
// 如果后面有回车符,高版本的IE和火狐会识别成 “空白文本”#text,
// 而低版本IE会直接越过-----不光是节点,其它节点也一样
// 表格的,标签和标签中间,其实还隐藏着一个 标签----表格体
动态的创建和删除:
创建表格,通过输入的值:
function createTable(){
tableNode=document.createElement("table");//获得对象
tableNode.setAttribute("id","table")
var row=parseInt(document.getElementsByName("row1")[0].value);//获得行号
//alert(row);
if(row<=0 || isNaN(row) ){
alert("输入的行号错误,不能创建表格,请重新输入:");
return;
}
var cols=parseInt(document.getElementsByName("cols1")[0].value);
if(isNaN(cols) || cols<=0){
alert("输入的列号错误,不能创建表格,请重新输入:");
return;
}
//上面确定了 现在开始创建
for(var x=0;x
删除行:
OFFER快
首个全流程托管的 AI 求职 Agent(自动筛选、沟通、网申)
下载
function delRow(){
//要删除行,必须得到table对象才能删除,所以在创建的时候必须要设置table对象的 id 方便操作
var tab=document.getElementById("table");//获得table对象
if(tab==null){
alert("删除的表不存在!")
return;
}
var rows=parseInt(document.getElementsByName("delrow1")[0].value);//获得要删除的对象
if(isNaN(rows)){
alert("输入的行不正确。请输入要删除的行。。。");
return;
}
if (rows >= 1 && rows <= tab.rows.length) {
tab.deleteRow(rows-1);
}else{
alert("删除的行不存在!!");
return ;
}
}
删除列:
//删除列要麻烦些, 要通过行来进行删除
// 一行的cells的长度就是列的个数
//tab.rows[x].deleteCell(cols-1)
function delCols(){
//获得table对象
var tab=document.getElementById("table");
if(tab==null){
alert("删除的表不存在!!");
return ;
}
//获得文本框里面的内容
var cols=parseInt(document.getElementsByName("delcols1")[0].value);
//检查是否可靠
if(isNaN(cols)){
alert("输入不正确。请输入要输出的列。。");
return;
}
if(!(cols>=1 && cols
完整的代码:
效果演示:
以上就是为大家分享的两种JavaScript动态创建table表格的方法,希望大家喜欢。
java速学教程(入门到精通)
java怎么学习?java怎么入门?java在哪学?java怎么学才快?不用担心,这里为大家提供了java速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!
下载
本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
文心一言
文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。
讯飞写作
基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿
即梦AI
一站式AI创作平台,免费AI图片和视频生成。
ChatGPT
最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。
短剧入口地址汇总
本专题整合了短剧app推荐平台,阅读专题下面的文章了解更多详细入口。
c语言中/相关合集
本专题整合了c语言中/的用法、含义解释。阅读专题下面的文章了解更多详细内容。
Java 设计模式与重构实践
本专题专注讲解 Java 中常用的设计模式,包括单例模式、工厂模式、观察者模式、策略模式等,并结合代码重构实践,帮助学习者掌握 如何运用设计模式优化代码结构,提高代码的可读性、可维护性和扩展性。通过具体示例,展示设计模式如何解决实际开发中的复杂问题。
C# 并发与异步编程
本专题系统讲解 C# 异步编程与并发控制,重点介绍 async 和 await 关键字、Task 类、线程池管理、并发数据结构、死锁与线程安全问题。通过多个实战项目,帮助学习者掌握 如何在 C# 中编写高效的异步代码,提升应用的并发性能与响应速度。
Python 强化学习与深度Q网络(DQN)
本专题深入讲解 Python 在强化学习(Reinforcement Learning)中的应用,重点介绍 深度Q网络(DQN) 及其实现方法,涵盖 Q-learning 算法、深度学习与神经网络的结合、环境模拟与奖励机制设计、探索与利用的平衡等。通过构建一个简单的游戏AI,帮助学习者掌握 如何使用 Python 训练智能体在动态环境中作出决策。
网站特效
/
网站源码
/
网站素材
/
前端模板