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