javascript表格,javascript表格交互页面
用js怎么建表格
1．在页面div中创建一个空白表，可以根据需要对其进行定制。
创新互联专业IDC数据服务器托管提供商，专业提供成都服务器托管，服务器租用，中国电信云锦天府，中国电信云锦天府，成都多线服务器托管等服务器托管服务。
2．创建表之后，我们可以编写关键代码来动态生成表。我们编写了一个js方法来触发使用。
3.在 TB 标签中，我们添加了标签，主要用于提供用户输入参数，而全局变量num主要用于区分每个添加参数的唯一id。
4．获取表中的数据，以供下图参考。
5．一旦我们获得了表中的数据，我们就应该将其转换成json数据的形式。
怎么用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);
}
}
javascript怎么修改表格的内容
用javascript动态修改表格内容,先来看JS部分代码：
script
var arr=new Array()
arr[0]="这是改变后的内容一";
arr[1]="这是改变后的内容二";
arr[2]="这是改变后的内容三";
/script
把切换后的内容写在了JavaScript的数组里，这样方便。
使用上面的JavaScript：
select onchange="zz.cells[this.selectedIndex].innerHTML=arr[this.selectedIndex]"
option value=a改变第一格/option
option value=a改变第二格/option
option value=a改变第三格/option
/select
table id=zz border=1
tr height=20
td width=220第一格/td
td width=220第二格/td
td width=220第三格/td
/tr
/table
把以上代码放入网页的body/body区间内即可。
javascript设置表格的宽度和高度
window.outerheight
窗口总高度
和window.screen.availheight一样
window.innerheight
窗口可视区域高度
window.screen.height
显示器屏幕高度
另外：jquery获取高度
$(".thiscrumbs").height()
元素本身高度
$(".thiscrumbs").innerheight()
元素高度+内边距
$(".thiscrumbs").outerheight()
元素高度+内边距+边框
$(".thiscrumbs").outerheight(true)
元素高度+内边距+边框+外边距
用js怎么建表格？
input type="button" value="创建一个新表格" onclick="createTable(800,8,5)" /
script type="text/javascript"
function createTable(width,rows,cells)
{
//创建一个表格对象
var mytable=document.createElement("table");
mytable.cellSpacing="1px";
//创建一个表头对象
var mythead=document.createElement("thead");
for(a=0;a1;a++)
{
var myrow=document.createElement("tr");
for(b=0;bcells;b++)
{
var mytd=document.createElement("td");
mytd.innerHTML="表 头 " +(b+1);
mytd.style.cssText="text-align:center;";
myrow.appendChild(mytd);
}
mythead.appendChild(myrow);
}
//创建一个表体对象
var mytbody=document.createElement("tbody");
for(i=0;irows;i++)
{
var myrow=document.createElement("tr");
for(j=0;jcells;j++)
{
var mytd=document.createElement("td");
mytd.style.backgroundColor="#fff";
mytd.innerHTML="第"+(i+1)+"行第"+(j+1)+"列";
myrow.appendChild(mytd);
}
mytbody.appendChild(myrow);
}
//创建一个表脚对象
var mytfoot=document.createElement("tfoot");
for(c=0;c1;c++)
{
var myrow=document.createElement("tr");
for(d=0;d1;d++)
{
var mytd=document.createElement("td");
mytd.innerHTML="脚"+(d+1);
mytd.style.cssText="text-align:center;";
mytd.colSpan="10";
myrow.appendChild(mytd);
}
mytfoot.appendChild(myrow);
}
//将表头追加到表格
mytable.appendChild(mythead)
//将表体追加到表格
mytable.appendChild(mytbody);
//将表脚追加到表格
mytable.appendChild(mytfoot);
//追加对象样式
mythead.style.cssText="background-color:#003; color:#FFF; font-size:14px; font-weight:600; width:"+width+"px;";
mytable.style.cssText="background-color:#999; border:0px; width:"+width+"px;";
mytfoot.style.cssText="background-color:#003; color:#FFF; font-size:14px; font-weight:600; width:"+width+"px;";
document.body.appendChild(mytable);
}
/script
当前文章：javascript表格,javascript表格交互页面
地址分享：http://mswzjz.cn/article/dsdhjdh.html