js代码表格（JSA表格）

本文目录一览：

• 1、JS通过输入值做表格的代码
• 2、求一段表格效果的JS代码
• 3、html中如何使用js动态添加表格
• 4、怎么用js做一个表格
• 5、js代码操作表格，实现动态计算
• 6、用js怎么建表格

JS通过输入值做表格的代码

!DOCTYPE html

html

head

    meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″

    titleRunJS 演示代码/title

    style

        * {

    margin: 0;

}

body {

    background-color: rgb(44, 52, 55);

}

table {

    border-collapse: collapse;

}

th,td {

    border: 1px solid #fd3;

    width: 20px;

    height: 15px;

}

    /style

    script

        var produce = function() {

            var tab = document.createElement(“table”);

            var tb = document.createElement(“tbody”);

            var i = r.value * 1;

            var j = c.value * 1;

            for (var m = 0; m  i; m++) {

                var tr = tb.insertRow(tb.rows.length);

                for (var n = 0; n  j; n++) {

                    tr.insertCell(tr.cells.length);

                }

            }

            result.innerHTML = “”;

            tab.appendChild(tb);

            result.appendChild(tab);

        }

    /script

/head

body行数：

    input type=”text” id=”r” /

    br /列数：

    input type=”text” id=”c” /

    br /

    button onclick=”produce()”生成表格/button

    div id=”result”/div

/body

/html

求一段表格效果的JS代码

用jQuery实现，代码如下：

var defaultColor=”#112233″;

$(function(){

$(“table tr”).each(i){

if(i5)

{

$(this).css(“background-color”,”#112233″);//前五行颜色

}

else

{

$(this).css(“background-color”,”#223344″);//五行之后的颜色

}

$(“table tr”).hover(function(){

defaultColor=$(this).css(“background-color”);

$(this).css(“background-color”,”#334455″);//鼠标移到的颜色

},function(){

$(this).css(“background-color”,defaultColor);//鼠标移出的颜色，恢复默认颜色

});

}

});

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做一个表格

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

2．创建表之后，我们可以编写关键代码来动态生成表。我们编写了一个js方法来触发使用。

3.在 TB 标签中，我们添加了标签，主要用于提供用户输入参数，而全局变量num主要用于区分每个添加参数的唯一id。

4．获取表中的数据，以供下图参考。

5．一旦我们获得了表中的数据，我们就应该将其转换成json数据的形式。

js代码操作表格，实现动态计算

数据导入后，表格上有一个序号列，这个是唯一的

可以用

序号+列名当作    数量，单价、小计这三个td的ID值，

双击的时候改变值，数量与单位onblur时进行计算，

再把结果放到小计里边

用js怎么建表格

HTML

script language=”javascript”

var tableObj = null;

function newTable(){

tableObj = document.createElement( “table” );

tableObj.border = “1”;

divObj.appendChild( tableObj );

newRow.style.display = “block”;

};

function AddRow(){

if( tableObj == null )

newTable();

var trObj = tableObj.insertRow(); // 加一行

for(var i = 0; i 3; i ++){

var tdObj = trObj.insertCell(); // 加一列

tdObj.innerText = tableObj.rows.length + “_” + (i + 1);

}

};

/script

BODY

button onclick=”newTable()”创建表格/buttonbutton id=”newRow” style=”display: none;” onclick=”AddRow()”添加新行/button

div id=”divObj”/div

/BODY

/HTML