JavaScript如何动态创建table表格两种JavaScript动态创建table表格的⽅法，分享给⼤家，具体实现如下
⽅法⼀：最原始的⽅法，创建⼀⼀元素
var ateElement("table");
var ateElement("tbody");
var ateElement("tr");
var ateElement("td");
//开始appendchild()追加各个元素
a3.appendChild(a4);
a2.appendChild(a3);
a1.appendChild(a2);
⽅法⼆：利⽤table对象⾥⾯含有的函数：插⼊⾏和插⼊列
var ateElement("table");
var trNode=tabNode.insertRow();
var tdNode=trNode.insertCell;
tabNode.innerHTML="这是采⽤table对象⾥⾯的函数创建的"
html滚动效果代码
注意：利⽤原始⽅法，⼀个个createElement时候，必须要添加⼀个tbody对象
//获取<table>标签的兄弟节点
// var node3=tabnode.previousSibling;//前⼀个节点获取对此对象的上⼀个兄弟对象的引⽤。
// alert("previous--node3:"+node3);//#text
// 如果<table>后⾯有回车符，⾼版本的IE和⽕狐会识别成 “空⽩⽂本”#text，
// ⽽低版本IE会直接越过-----不光是<table>节点，其它节点也⼀样
// 表格的,<table>标签和<tr>标签中间，其实还隐藏着⼀个<tbody>标签----表格体
动态的创建和删除：
创建表格，通过输⼊的值：
function createTable(){
ateElement("table");//获得对象
tableNode.setAttribute("id","table")
var row=ElementsByName("row1")[0].value);//获得⾏号
//alert(row);
if(row<=0 || isNaN(row) ){
alert("输⼊的⾏号错误，不能创建表格，请重新输⼊：");
return;
}
var cols=ElementsByName("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);
}
}
}
删除⾏：
function delRow(){
//要删除⾏，必须得到table对象才能删除，所以在创建的时候必须要设置table对象的 id ⽅便操作
var ElementById("table");//获得table对象
if(tab==null){
alert("删除的表不存在！")
return;
}
var rows=ElementsByName("delrow1")[0].value);//获得要删除的对象
if(isNaN(rows)){
alert("输⼊的⾏不正确。请输⼊要删除的⾏。。。");
return;
}
if (rows >= 1 && rows <= ws.length) {
tab.deleteRow(rows-1);
}else{
alert("删除的⾏不存在！！");
return ;
}
}
删除列：
//删除列要⿇烦些，要通过⾏来进⾏删除
// ⼀⾏的cells的长度就是列的个数
//ws[x].deleteCell(cols-1)
function delCols(){
//获得table对象
var ElementById("table");
if(tab==null){
alert("删除的表不存在！！");
return ;
}
//获得⽂本框⾥⾯的内容
var cols=ElementsByName("delcols1")[0].value);
//检查是否可靠
if(isNaN(cols)){
alert("输⼊不正确。请输⼊要输出的列。。");
return;
}
if(!(cols>=1 && cols&ws[0].cells.length)){
alert("您要删除的⾏不存在！！");
return;
}
for(var x=0;x&ws.length;x++){//所有的⾏
}
}
完整的代码：
<!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(){
ateElement("table");//获得对象
tableNode.setAttribute("id","table")
var row=ElementsByName("row1")[0].value);//获得⾏号  //alert(row);
if(row<=0 || isNaN(row) ){
alert("输⼊的⾏号错误，不能创建表格，请重新输⼊：");
return;
}
var cols=ElementsByName("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);
}
}
}
function delRow(){
//要删除⾏，必须得到table对象才能删除，所以在创建的时候必须要设置table对象的 id ⽅便操作  var ElementById("table");//获得table对象
if(tab==null){
alert("删除的表不存在！")
return;
}
var rows=ElementsByName("delrow1")[0].value);//获得要删除的对象
if(isNaN(rows)){
alert("输⼊的⾏不正确。请输⼊要删除的⾏。。。");
return;
}
if (rows >= 1 && rows <= ws.length) {
tab.deleteRow(rows-1);
}else{
alert("删除的⾏不存在！！");
return ;
}
}
//删除列要⿇烦些，要通过⾏来进⾏删除
// ⼀⾏的cells的长度就是列的个数
/
/ws[x].deleteCell(cols-1)
function delCols(){
//获得table对象
var ElementById("table");
if(tab==null){
alert("删除的表不存在！！");
return ;
}
//获得⽂本框⾥⾯的内容
var cols=ElementsByName("delcols1")[0].value);
//检查是否可靠
if(isNaN(cols)){
alert("输⼊不正确。请输⼊要输出的列。。");
return;
}
if(!(cols>=1 && cols&ws[0].cells.length)){
alert("您要删除的⾏不存在！！");
return;
}
for(var x=0;x&ws.length;x++){//所有的⾏
}
}
</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表格的⽅法，希望⼤家喜欢。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。