这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了 JavaScript 如何动态创建 table 表格,一些时候需要动态的创建和删除表格,接下来的文章中将为大家介绍下 javascript 是如何做到的,感兴趣的朋友不要错过
两种 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对象
- //获取<table>标签的兄弟节点
- // var node3=tabnode.previousSibling;//前一个节点 获取对此对象的上一个兄弟对象的引用。
- // alert("previous--node3:"+node3);//#text
- // 如果<table>后面有回车符,高版本的IE和火狐会识别成 "空白文本"#text,
- // 而低版本IE会直接越过-----不光是<table>节点,其它节点也一样
- // 表格的,<table>标签和<tr>标签中间,其实还隐藏着一个<tbody>标签----表格体
动态的创建和删除: 创建表格,通过输入的值:
- 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<row;x++){
- var trNode=tableNode.insertRow();
- for(var y=0;y<cols;y++){
- var tdNode=trNode.insertCell();
- tdNode.innerHTML="单元格"+(x+1)+"-"+(y+1);
- }
- }
- document.getElementById("div1").appendChild(tableNode);//添加到那个位置
- }
删除行:
- 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<tab.rows[0].cells.length)){
- alert("您要删除的行不存在!!");
- return;
- }
- for(var x=0;x<tab.rows.length;x++){//所有的行
- tab.rows[x].deleteCell(cols-1);
- }
- }
完整的代码:
- <!DOCTYPE html>
- <html>
- <head>
- <title>createTable2.html</title>
- <style type="text/CSS">
- table{
- border:#00ffff solid 2px;
- border-collapse:collapse;
- }
- td{
- border:#8080ff solid 2px;
- padding:10px;
- }
- </style>
- <script type="text/javascript">
- var tableNode;
- 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<row;x++){
- var trNode=tableNode.insertRow();
- for(var y=0;y<cols;y++){
- var tdNode=trNode.insertCell();
- tdNode.innerHTML="单元格"+(x+1)+"-"+(y+1);
- }
- }
- document.getElementById("div1").appendChild(tableNode);//添加到那个位置
- }
- 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<tab.rows[0].cells.length)){
- alert("您要删除的行不存在!!");
- return;
- }
- for(var x=0;x<tab.rows.length;x++){//所有的行
- tab.rows[x].deleteCell(cols-1);
- }
- }
- </script>
- </head>
- <body>
- 行:<input type="text" name="row1"/>
- 列:<input type="text" name="cols1"/>
- <input type="button" value="创建表格" onclick="createTable()"/><br/>
- <input type="text" name="delrow1"/>
- <input type="button" value="删除行" onclick="delRow()"/><br/>
- <input type="text" name="delcols1"/>
- <input type="button" value="删除列" onclick="delCols()"/><br>
- <div id="div1"></div>
- </body>
- </html>
效果演示:
以上就是为大家分享的两种 JavaScript 动态创建 table 表格的方法,希望大家喜欢。
来源: http://www.phperz.com/article/17/0411/268652.html