利用js对table动态增加和删除行（附带table样式，鼠标滑过和点击样式）
看了一下午各種大牛關(guān)于js動態(tài)畫表的文章，自己也手癢寫了一個。附帶了一些table的樣式，鼠標(biāo)滑過和選擇的樣式。有用的拿去參考，有意見和想法的也隨時歡飲交流，本人只是用firefox和IE11測試可用。下面是htm代碼：
<body>
<div style="width:100%; height:10%; overflow-x: none; overflow-y: none; position: relative; top: 2px;background-color: #FAFCFF;" >
<h3 align="center">內(nèi)部培訓(xùn)計劃錄入</h3>
</div>
<a href="#" id="addData" align="left">新增</a>
<a href="#" id="delDta" align="left">刪除</a>
<center>
<div id="mainDiv" style="overflow-x: auto; ;position:relative; margin-left:1px; margin-right:1px; width:100%; height: 85%">
<table id="dataTable" class="mimicHtc" cellpadding="1" cellspacing="1" style="width:1110px;" align="center">
<tr class="mimicHtc_tr" style="height: 20px">
<th class="mimicHtc_item" align="center" style="width: 70px;font-weight: bold;">班次</th>
<th class="mimicHtc_item" style="text-align:center;width:200px;font-weight: bold;">培訓(xùn)對象</th>
<th class="mimicHtc_item" style="text-align:center;width:210px;font-weight: bold;">培訓(xùn)目標(biāo)</th>
<th class="mimicHtc_item" align="center" style="width:360px;font-weight: bold;">培訓(xùn)課程</th>
</tr>
<tr style="display: none;">
</tr>
</table>
</div>
</center>
</body>
js代碼:
var id=1;
function addTr()
{
if($('#CLASS_'+(id-1)).val() == '' ){
$.messager.alert('請?zhí)顚懓啻魏笤傩略?#39;);
return;
}
if($('#TROBJECT_'+(id-1)).val() == '' ){
$.messager.alert('請?zhí)顚懪嘤?xùn)對象后再新增');
return;
}
if($('#TRTARGET_'+(id-1)).val() == '' ){
$.messager.alert('請?zhí)顚懪嘤?xùn)目標(biāo)后再新增');
return;
}
if($('#TRCLASS_'+(id-1)).val() == '' ){
alert('請?zhí)顚懪嘤?xùn)課程后再新增');
return;
}
var tb=document.getElementById('dataTable');
var newTr = tb.insertRow(-1);
newTr.id='tr'+id;
newTr.align='center';
$(newTr).attr('class','mimicHtc_tr');
if(window.attachEvent){
newTr.attachEvent(" function(){
var bgcolor = newTr.style.backgroundColor;
if(bgcolor == '#e1e8fb'){
return
}else{
newTr.style.backgroundColor = '#FFF68F'
}
});
newTr.attachEvent(" function(){
var bgcolor = newTr.style.backgroundColor;
if(bgcolor == '#e1e8fb'){
return
}else{
newTr.style.backgroundColor = '#FFFFFF';
}
});
newTr.attachEvent(" function(){
var table_obj = document.getElementById('dataTable');
for(var i=0; i<table_obj.rows.length; i++){
table_obj.rows[i].style.backgroundColor = '#FFFFFF'
}
newTr.style.backgroundColor = '#e1e8fb'
});
}else{
newTr.addEventListener("mouseover", function(){
var bgcolor = this.style.backgroundColor;
if(bgcolor == 'rgb(225, 232, 251)'){
return
}else{
this.style.backgroundColor = '#FFF68F'
}
});
newTr.addEventListener("mouseout", function(){
var bgcolor = this.style.backgroundColor;
if(bgcolor == 'rgb(225, 232, 251)'){
return
}else{
this.style.backgroundColor = '#FFFFFF';
}
});
newTr.addEventListener("click", function(){
var table_obj = document.getElementById('dataTable');
for(var i=0; i<table_obj.rows.length; i++){
table_obj.rows[i].style.backgroundColor = '#FFFFFF'
}
this.style.backgroundColor = '#e1e8fb'
});
}
var newTd0 = newTr.insertCell();
var newTd1 = newTr.insertCell();
var newTd2 = newTr.insertCell();
var newTd3 = newTr.insertCell();
newTd0.innerHTML = "<input id=\"CLASS_"+id+"\" class=\"leftInput\" style=\"text-align:left;width: 70px\" value="+id+" >";
newTd1.innerHTML= "<input id=\"TROBJECT_"+id+"\" class=\"leftInput\" style=\"text-align:left;width: 200px\" value="+id+" >";
newTd2.innerHTML= '<input id="TRTARGET_'+id+'" class="leftInput" style="text-align:left;width: 210px" value='+id+' >';
newTd3.innerHTML= '<input id="TRCLASS_'+id+'" class="leftInput" style="text-align:left;width: 360px" value='+id+'>'
id++;
}
function moveTr()
{
//獲得表格對象(注意此處是表格對象Table，如果用到了thead和tbody，而取的是tbody的對象的話，刪除行時需要考慮索引問題，行索引是針對整體，而如果獲取的是tbody對象，刪除時需要的索引是針對tbody自身，所以一定要減去thead的行數(shù)，切記切記，否則就會異常)
var tb = document.getElementById('dataTable');
var rowId = null;
var isModify = 0;
if(window.attachEvent){
for(var i=0; i<tb.rows.length; i++){
if(tb.rows[i].style.backgroundColor == '#e1e8fb'){
rowId = tb.rows[i].id;
isModify = 1;
break;
}else{
continue;
}
}
}else{
for(var i=0; i<tb.rows.length; i++){
if(tb.rows[i].style.backgroundColor == 'rgb(225, 232, 251)'){
rowId = tb.rows[i].id;
isModify = 1;
break;
}else{
continue;
}
}
}
if(isModify == 0){
alert('請選擇刪除的行！');
return;
}
var tr=document.getElementById(rowId);
tb.deleteRow(tr.rowIndex);
delCallBack(rowId);//刷新行索引
id--;
}
function delCallBack(rowId){
var numId = parseInt(rowId.replace('tr',''));
var rows = document.getElementById('dataTable').rows;
for(var i = numId; i<rows.length-1;i++){
var tableTr = document.getElementById('tr' + (i + 1));
tableTr.id = 'tr' + i;
document.getElementById('CLASS_'+(i+1)).value = i;
document.getElementById('TROBJECT_'+(i+1)).value = i;
document.getElementById('TRTARGET_'+(i+1)).value = i;
document.getElementById('TRCLASS_'+(i+1)).value = i;
document.getElementById('CLASS_'+(i+1)).id = 'CLASS_' + i;
document.getElementById('TROBJECT_'+(i+1)).id = 'TROBJECT_' + i;
document.getElementById('TRTARGET_'+(i+1)).id = 'TRTARGET_' + i;
document.getElementById('TRCLASS_'+(i+1)).id = 'TRCLASS_' + i;
}
}
css代碼:
.mimicHtc {background-color: #bbd8eb;width: 100%;FONT-FAMILY: Arial, "宋體", Helvetica, sans-serif; }.mimicHtc_item {FONT-FAMILY: Arial, "宋體", Helvetica, sans-serif;color: #000000;text-decoration: none;letter-spacing: 1px;text-align: center;line-height: 15px;font-weight: normal;height: 25px;background-color: #EBF4FB;padding-left:2px;padding-right:2px;border-top-width: 1px;border-right-width: 0px;border-bottom-width: 0px;border-left-width: 1px;border-top-style: solid;border-right-style: solid;border-bottom-style: solid;border-left-style: solid;border-top-color: #FFFFFF;border-right-color: #FFFFFF;border-bottom-color: #FFFFFF;border-left-color: #FFFFFF; }.mimicHtc_tr {color: #000000;text-decoration: none;text-align: left;line-height: 15px;height: 25px;padding-left:2px;padding-right:2px;word-break:keep-all;/* 不換行 */white-space:nowrap;/* 不換行 */overflow:hidden; /*內(nèi)容超出寬度時隱藏超出部分的內(nèi)容 */text-overflow:ellipsis; /*當(dāng)對象內(nèi)文本溢出時顯示省略標(biāo)記(...) ；需與overflow:hidden;一起使用。*/background-color: #FFFFFF; } .leftInput{text-align: left;font-size: 12px;border: none;padding-left: 0px;padding-right: 0px;pxfont-family: Arial, "宋體", Helvetica, sans-serif;width:98%;background-color: transparent; }
轉(zhuǎn)載于:https://blog.51cto.com/phzg03/1328960
總結(jié)
以上是生活随笔為你收集整理的利用js对table动态增加和删除行（附带table样式，鼠标滑过和点击样式）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Javascript 常见使用误区
- 下一篇： 部署单节点OpenStack