js表格演算法_怎麼用js做一個表格

1. 用js怎麼來生成一個二維表格

<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

table{

margin:0;

padding:0;

border: 0 none;

}

td{

width:20px;

height:20px;

border:1px solid #CCC;

}

</style>

</head>

<body>

<table id="table"></table>

<script>

(function(){

var str="";

for(var c=0;c<5;c++){

str+='<tr>'

for(var r=0;r<5;r++){

str+='<td>'+((c*5+r)>9?(c*5+r):"0"+(c*5+r))+'</td>'

}

str+='</tr>'

}

var o_table=document.getElementById("table");

o_table.innerHTML=str;

})()

</script>

</body>

</html>

2. 怎麼用js做一個表格

1．在頁面div中創建一個空白表，可以根據需要對其進行定製。

3. 只用js如何實現表格內容的動態修改

<body>

<tableid='test'>//定義一個table

<tr>

</tr>

</table>

vartb=document.getElementById('test');//獲取表格的dom節點

vartd=tb.rows[0].cells[0];//獲取0行0列的td單元格

td.innerHTML='222';//動態修改表格的內容為222

</script>

</body>

思路：

1、獲取表格的dom節點

2、通過rows和cells定位td單元格

3、通過修改innerHTML

(3)js表格演算法擴展閱讀：

JS實現動態表格的新增，修改，刪除操作

一、相關JS函數

function setParamslist() {

var tab = document.getElementById("tab");

//表格行數

var rows = tab.rows.length ;

//表格列數

var cells = tab.rows.item(0).cells.length ;

//alert("行數"+rows+"列數"+cells);

var rowData = "";

for(var i=1;i<rows;i++) {

var cellsData = new Array();

for(var j=0;j<cells-1;j++) {

cellsData.push(tab.rows[i].cells[j].innerText);

}

rowData = rowData + "|" + cellsData;

}

document.getElementById("paramslist").value = rowData;

}

//打開相關新增應用參數界面

function openAppParamsPage() {

var param = new Object();

//這個參數一定要傳。

param.win = window;

param.id = 100;

param.name = "test";

param.birthday = new Date();

var result = window.showModalDialog("addParamsItem","dialogWidth:500px;dialogHeight:600px;dialogLeft:200px;dialogTop=200px");

//var temp = document.getElementById("paramslist").value;

//document.getElementById("paramslist").value = temp + result;

addSort(result);

}

// 增加應用參數函數

function addSort(data) {

var name = data;

if(name == ""||name==undefined ) {

return;

}

console.log(data);

var params = data.split(",");

var paramName = params[0];

var paramCode = params[1];

var paramValue = params[2];

var row = document.createElement("tr");

row.setAttribute("id", paramCode);

var cell = document.createElement("td");

cell.appendChild(document.createTextNode(paramName));

row.appendChild(cell);

cell = document.createElement("td");

cell.appendChild(document.createTextNode(paramCode));

row.appendChild(cell);

cell = document.createElement("td");

cell.appendChild(document.createTextNode(paramValue));

row.appendChild(cell);

var deleteButton = document.createElement("input");

deleteButton.setAttribute("type", "button");

deleteButton.setAttribute("value", "刪除");

deleteButton.onclick = function () { deleteSort(paramCode); };

cell = document.createElement("td");

cell.appendChild(deleteButton);

row.appendChild(cell);

document.getElementById("sortList").appendChild(row);

}

// 刪除應用參數函數

function deleteSort(id) {

if (id!=null){

var rowToDelete = document.getElementById(id);

var sortList = document.getElementById("sortList");

sortList.removeChild(rowToDelete);

}

二、彈出框頁面，新增或者修改參數，並回寫相關數據。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<#include "/views/head.html"/>

</head>

<body>

<form >

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</td>

</tr>

</table>

</form>

</div>

</body>

</html>

//直接關閉窗口

function closeWindow() {

window.close();

}

//獲取值，組裝後返回

function returnResult() {

if(!$('form').valid())

return;

var paramName = document.getElementById("paramName");

var paramCode = document.getElementById("paramCode");

var paramValue = document.getElementById("paramValue");

//alert("value is " + paramName.value + "," + paramCode.value + "," + paramValue.value);

var result = paramName.value + "," + paramCode.value + "," + paramValue.value;

window.returnValue = result;

window.close();

}

</script>

4. js中表格內容排序

tr[b].cells[c].innerHTML=td[b].parentNode.cells[c].innerHTML
這一段代碼他是使用的html對象。當循環後會出現某些td的parent對象已經被更改了，因此會出現這種情況。
建議將排序後的數組的innerHTML存放到臨時變數裡面，再進行循環對td、tr賦值即可。
下面是js代碼。趕緊給分吧，呵呵
<script language="javascript">
var tr=new Array();//表格中所有行的集合
var td=new Array();//表格中指定列的集會
var a
function px_zm(){ //按某列的值進行行的排序
var tbody=$("tbody");
for(var i=0;i<tbody.rows.length;i++)
{
tr[i]=tbody.rows[i];
td[i]=tr[i].cells[];
}
for(var i=0;i<td.length; i++)
{
for(j=i;j<td.length;j++)
{
if(td[i].innerHTML<td[j].innerHTML)
{
a=td[i];
td[i]=td[j];
td[j]=a;
}
}
}
var trTempArray = new Array();
for(var b=0;b<4;b++){
var tdTempArray = new Array();
for(var c=0;c<4;c++){
// 將一行的td內容保存到tdTempArray當中。
tdTempArray[c] = td[b].parentNode.cells[c].innerHTML;
}
// 將一行內容保存到trTempArray。
trTempArray[b] = tdTempArray;
}
// 循環對表格內容重新賦值
for(var b=0;b<4;b++)
{
for(var c=0;c<4;c++){
tr[b].cells[c].innerHTML=trTempArray[b][c];
}
}

}

function $(id){
return document.getElementById(id);
}
</script>

5. js怎麼獲取整個表格的數據

1、JS獲取表格的簡便方法：獲取tbody:tBodies 獲取thead:tHead 獲取tfoot:tFoot 獲取行tr:rows 獲取列td:cells

使用實例： oTable.tBodies[0] oTable.tHead[0] oTable.tFoot[0] oTable.rows[1] oTable.cells[1]

2、遍歷
var oTable=document.getElementById("表格id");
oTable.tBodies[0]可以看成是rows和cells組成的二維數組，用兩個for循環嵌套遍歷一下就可以了

6. js遍歷復雜表格

jQuery:
var data = new Array();
$("table td").each(function() {
if ($(this).attr("rowspan") && $(this).attr("colspan")) {
data.push($(this).text());
}
});
alert(data);

js:
var data = new Array();
var table = document.getElementsByTagName("table")[0];
var td = table.getElementsByTagName("td");
for (var i = 0; i < td.length; i++) {
if (td[i].getAttribute("rowspan") && td[i].getAttribute("colspan")) {
data.push(td[i].innerHTML);
}
alert(data);

jquery和js的方法我都寫了，在網吧寫的，沒有編輯器，不好測試，你試試看
}

7. 請高手解答：如何用JS實現Table單元格的合並與拆分。求解答

上了那個站點。但沒找到你說的例子。
To51windows(海娃)、inelm(木野狐):
你們的例子都滿足不了我的要求。
那個在線編輯器還可以，但操作不方便。而且沒代碼。另外在拆分單元格時有Bug.
Toawaysrain(絕對零度)：
你提供的代碼正是我夢寐以求的。在簡單方正的表格中進行測試完全沒有問題。
但遺憾的是，在存在復雜的colSpan及rowSpan的表格中進行測試。該演算法無法完成跨行的合並。
在完成跨列的單元格合並後，也未對影響范圍內的其它單元格的rowSpan進行處理，這導致多次合並操作後表格錯亂。
我自己的演算法與該演算法存在差不多相同的問題。
請各位大蝦再提供些參考。感激不盡啊！

8. 如何用js循環函數做出1列多行的表格

可以對行進行循環取值操作。
不管表格有多少行多少列，都可以對行和列進行循環，取出列的值。

導航:首頁 > 源碼編譯 > js表格演算法

js表格演算法

(3)js表格演算法擴展閱讀：

與js表格演算法相關的資料