javascript表格,javascript表格交互页面

用js怎么建表格

1．在页面div中创建一个空白表，可以根据需要对其进行定制。

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