javascript动态创建表格(制作动态表格)
怎么用javascript创建表格
方法一：最原始的方法，创建一一元素
?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对象
动态的创建和删除：
创建表格，通过输入的值：
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);
????}?
}
html中如何使用js动态添加表格
一、动态加载表格
1.首先在html中为表格的添加位置设置id
即是在html的body标签内部写一个div标签表明表格要添加到此div的内部。如下
div id="tdl"div
2.在javascript中写添加表格的语句
若在当前html文件中，则写在script标签内部，如
复制代码 代码如下:
script type="text/javascript"
document.getElementById("tbl").innerHTML="tabletrtd/td/tr/table" //此处添加的表格可根据自己需要创建
/script
若是通过引入js文件，则在js文件（假设是test.js）中直接写如下语句
复制代码 代码如下:
document.getElementById("tbl").innerHTML="tabletrtd/td/tr/table"
然后再引入自己的html文件
复制代码 代码如下:
script type="text/javascript" src="test.js"/script
二、 动态添加表格行
1.首先在html中为表格行的添加位置设置id，此位置必须是tbody内部（不是特别准确，但根据我的测试就得到此结论，有其他的方法请留言，谢谢），如下
复制代码 代码如下:
table
thead/thead
tfoottfoot //tfoot与thead是与tbody配套使用，但我在写的时候，没用也可以。
tbody id="rows"/tbody
/table
[\s\S ]*\n
2.在javascript内容中，要先创建行和单元格，再在.tbody中添加行，如下
[code]
row=document.createElement("tr"); //创建行
td1=document.createElement("tr"); //创建单元格
td1.appendChild(document.createTextNode("content")); //为单元格添加内容
row.appendChild(td1); //将单元格添加到行内
document.getElementById("rows").append(row); //将行添加到tbody中
js动态添加表格
script type="text/javascript"
var $ = function(id){
return document.getElementById(id);
}
//全选
function checkAll(target) {
var checkeds = document.getElementsByName("b_id");
for (var i = 0; i checkeds.length; i++) {
checkeds[i].checked = target.checked;
}
}
//刷新行号
function refreshRowNo() {
var tbody = $("tbody");
for (var i = 0; i tbody.rows.length; i++) {
tbody.rows[i].cells[0].innerHTML = i + 1;
}
}
//添加行
function AddRow() {
var tbody = $("tbody");
var row = tbody.insertRow(tbody.rows.length);
row.insertCell(row.cells.length);
row.insertCell(row.cells.length).innerHTML = 'input type="checkbox" name="b_id" /';
row.insertCell(row.cells.length).innerHTML = 'input type="text" name="name" /';
row.insertCell(row.cells.length).innerHTML = 'input type="text" name="number" /';
row.insertCell(row.cells.length).innerHTML = 'input type="text" name="price" /';
row.insertCell(row.cells.length).innerHTML = 'input type="text" name="sum" /';
refreshRowNo();
}
//删除行
function DelRow() {
var checkeds = document.getElementsByName("b_id");
var ischeck = false;
for (var i = checkeds.length - 1; i = 0; i--) {
if (checkeds[i].checked) {
ischeck = true;
break;
}
}
if (ischeck) {
if (confirm("确定删除选中行?")) {
for (var i = checkeds.length - 1; i = 0; i--) {
if (checkeds[i].checked) {
var index = checkeds[i].parentNode.parentNode.rowIndex;
$("tbody").deleteRow(index - 1);
}
}
refreshRowNo();
}
} else {
alert("请选中需要删除的行!");
}
}
//保存
function Save() {
var detail = [],
tbody = $("tbody");
for (var i = 0; i tbody.rows.length; i++) {
var name = tbody.rows[i].cells[2].childNodes[0].value;
var number = tbody.rows[i].cells[3].childNodes[0].value;
var price = tbody.rows[i].cells[4].childNodes[0].value;
var sum = tbody.rows[i].cells[5].childNodes[0].value;
var item = name + "^" + number + "^" + price + "^" + sum;
detail.push(item);
}
var detailstr = detail.join("|");
$("detail").value = detailstr;
$("myform").submit();
}
/script
form name="myform" action="AddOrder.aspx" method="post"
input type="hidden" id="detail" name="detail" /
ul
li采购单编号：input type="text" id="CGDBH" name="CGDBH" //li
li
供应商名称：input type="text" id="GYSMC" name="GYSMC" /
input type="button" onclick="AddRow()" value="增加一行" /
input type="button" onclick="DelRow()" value="删除" /
input type="button" onclick="Save()" value="保存" /
/li
/ul
table cellpadding="1" cellspacing="2"
tr
th style="width:60px"序号/th
th style="width:20px"input type="checkbox" onclick="checkAll(this)" //th
th style="width:120px"名称/th
th style="width:120px"数量/th
th style="width:120px"单价/th
th style="width:120px"总金额/th
/tr
tbody id="tbody"
tr
td1/td
tdinput type="checkbox" name="b_id" //td
tdinput type="text" name="name" //td
tdinput type="text" name="number" //td
tdinput type="text" name="price" //td
tdinput type="text" name="sum" //td
/tr
/tbody
/table
/form
如何使用JavaScript创建一个动态表格
//?你的?HTML?的?body?中添加如下内容
//?一个?div?用来放生成的?table?；?一个按钮执行?create?
//?div?id="div"/div?
//?input?type="button"?onclick="create()"?/?
//?以下是?js?方法
script?src=""?type="text/javascript"/script
script?type="text/javascript"
????function?create()?{
????????//?使用?$("table/table")?生成一个?table
????????var?tab?=?$("table?border='1'/table");
????????//?3?行循环3次
????????for?(var?i?=?1;?i?=?3;?i++)?{
????????????//?每次生成一个?tr/tr
????????????var?row?=?$("tr/tr");
????????????//?4?列循环?4?次
????????????for?(var?j?=?1;?j?=?4;?j++)?{
????????????????//?给?tr/tr?append（添加）??tdi行j列/td
????????????????row.append($("td"?+?i?+?"行"?+?j?+?"列"?+?"/td"));
????????????}
????????????//?给?table/table?每次循环添加上边的?tr****/tr
????????????tab.append(row);
????????}
????????//?最后把生成的?table***/table?放到?id=div?的控件中
????????$("#div").append(tab);
????}
/script