html5中table操作

来源：互联网发布：网络公关公司排名编辑：程序博客网时间：2024/05/29 18:00

1.给一个table增加一列：

<head>

</head>

<tbody>

</tbody>

</table>

var tab=document.getElementById("objectClassTab");//获得表格

var head = tab.getElementsByTagName("thead")[0];//获取head

var trhead = head.getElementsByTagName("tr")[0];//获取第一行

var headlen=head.getElementsByTagName('th').length;//获取列的总数

var thhead = head.getElementsByTagName("th")[headlen];//表头尾部追加一列

var colsNum=tab.rows.item(0).cells.length; //表格的列数

var num=tab.rows.length;//表格当前的行数

var th = document.createElement("th");//创建列的头不

trhead.insertBefore(th,thhead).innerHTML =“列名字”;

for(vari=1;i<num; i++)

{

tab.rows[i].insertCell(colsNum).innerHTML = "";//每一行尾增加一列

}

给表头增加一列时也可以试下：

trhead.appendChild.innerHTML="<th>"+想要加入的动态值+"</th>";//插入列head;

2.给一个table表增加一行：

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

var thead = table.getElementsByTagName("thead")[0];

var tbody = "";

if (document.getElementsByTagName("tbody").length != 0) {

tbody = document.getElementsByTagName("tbody")[0];

} else {

tbody = document.createElement("tbody");

table.appendChild(tbody);

}

if(thead!=null){

varlen = thead.getElementsByTagName('th').length;

var tbodyLength = tbody.rows.length;

varnewRow = tbody.insertRow(tbodyLength);

newRow.insertCell(0).innerHTML = "<input type='checkbox' name='checkbox' value = 'checkbox'onclick='handleTable(this)'>";

for (vari = 1; i < len; i++) {

//newRow.insertCell(i).innerHTML ="<input type='text' name='' value=''>";

newRow.insertCell(i).innerHTML = "";

}

3.删除选中行

function deleteRow() {

var tab = document.getElementById('objectClassTab');

for (var i = tab.rows.length - 1; i >= 0; i--) {

if (tab.rows[i].cells[0].getElementsByTagName('input')[0].checked) {

if(tab.rows[i].parentNode.nodeName=="TBODY"){

tab.deleteRow(i);

}

4.全选操作

function checkedAll(object){

/* $('#quanxuan').toggle(function () {

$("input[name='abc']").attr("checked", 'true');

}, function () {

$("input[name='abc']").removeAttr("checked");

}); */

var tab = document.getElementById('objectClassTab');

if(object.checked) {

for (var i = tab.rows.length - 1; i > 0; i--) {

tab.rows[i].cells[0].getElementsByTagName('input')[0].checked = true;

tab.rows[i].cells[0].parentNode.style.background = '#9acfea';

}

}else {

for (var i = tab.rows.length - 1; i > 0; i--) {

tab.rows[i].cells[0].getElementsByTagName('input')[0].checked = false;

tab.rows[i].cells[0].parentNode.style.background = '';

}

5.增加表头

function addHead(object) {

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

var thead =document.createElement("thead");

var html ="<th><input type=\"checkbox\"name=\"checkbox\" value=\"checkbox\"onclick=\"checkedAll(this)\"></th>";

for (vari=0;i<object.length;i++) {

vardata = object[i].value;

//varRexStr = /\<|\>/g ;

varRexStr = /\</g ;

data= data.replace(RexStr,'&lt');

html+="<th>"+object[i].key+"("+data+")</th>";

}

thead.innerHTML = html;

table.insertBefore(thead,table.children[0]);

}

6.创建js的map类型

var Map = function(){

this._entrys= new Array();

this.put= function(key, value){

if(key == null || key == undefined) {

return;

}

varindex = this._getIndex(key);

if(index == -1) {

varentry = new Object();

entry.key= key;

entry.value= value;

this._entrys[this._entrys.length]= entry;

}else{

this._entrys[index].value= value;

}

};

this._getIndex= function(key){

if(key == null || key == undefined) {

return-1;

}

var_length = this._entrys.length;

for(var i = 0; i < _length; i++) {

varentry = this._entrys[i];

if(entry == null || entry == undefined) {

continue;

}

if(entry.key === key) {//equal

returni;

}

return-1;

};

}

7.将单元格转化成文本框，然后再取消文本框

// 将单元格转化成文本框

function changeTotext(obj)

{

var tdValue = obj.innerText;

obj.innerText = "";

if(obj.id=="booleanType"){

var txt = document.createElement("select");

txt.id = "_text_";

var str ="<option>true</option><option>false</option>";

txt.innerHTML = str;

obj.appendChild(txt);

}else{

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

txt.type = "text";

txt.value = tdValue;

txt.id = "_text_";

txt.setAttribute("className","text");

obj.appendChild(txt);

txt.select();

}

// 取消单元格中的文本框，并将文本框中的值赋给单元格

function cancel(obj)

{

var txtValue =document.getElementById("_text_").value;

obj.innerText = txtValue;

}

// 事件

document.onclick = function()

{

if(event.srcElement.tagName.toLowerCase() == "td"

&&event.srcElement.getElementsByTagName("input").length == 0

&&event.srcElement.parentNode.parentNode.parentNode.id == "objectClassTab"

&&event.srcElement.id != "objectid" && event.srcElement.id !="saveObject") {

changeTotext(event.srcElement);

}

document.onmousedown = function() {

if(document.getElementById("_text_")

&&event.srcElement.id != "_text_") {

var obj =document.getElementById("_text_").parentElement;

cancel(obj);

dataDeal(obj);

}

0 0