看了一下午各類大牛關於js動態畫表的文章,本身也手癢寫了一個。附帶了一些table的樣式,鼠標滑過和選擇的樣式。有用的拿去參考,有意見和想法的也隨時歡飲交流,本人只是用firefox和IE11測試可用。下面是htm代碼:css
<body>
<div style="width:100%; height:10%; overflow-x: none; overflow-y: none; position: relative; top: 2px;background-color: #FAFCFF;" >
<h3 align="center">內部培訓計劃錄入</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;">培訓對象</th>
<th class="mimicHtc_item" style="text-align:center;width:210px;font-weight: bold;">培訓目標</th>
<th class="mimicHtc_item" align="center" style="width:360px;font-weight: bold;">培訓課程</th>
</tr>
<tr style="display: none;">
</tr>
</table>
</div>
</center>
</body>ide
js代碼:測試
var id=1;
function addTr()
{
if($('#CLASS_'+(id-1)).val() == '' ){
$.messager.alert('請填寫班次後再新增');
return;
}
if($('#TROBJECT_'+(id-1)).val() == '' ){
$.messager.alert('請填寫培訓對象後再新增');
return;
}
if($('#TRTARGET_'+(id-1)).val() == '' ){
$.messager.alert('請填寫培訓目標後再新增');
return;
}
if($('#TRCLASS_'+(id-1)).val() == '' ){
alert('請填寫培訓課程後再新增');
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的行數,切記切記,不然就會異常)
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;
}
}
this
css代碼:spa
.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; /*內容超出寬度時隱藏超出部分的內容 */ text-overflow:ellipsis; /*當對象內文本溢出時顯示省略標記(...) ;需與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; }