看了一下午各种大牛关于js动态画表的文章，自己也手痒写了一个。附带了一些table的样式，鼠标滑过和选择的样式。有用的拿去参考，有意见和想法的也随时欢饮交流，本人只是用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">内部培训计划录入</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>
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;
}
}
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; /*内容超出宽度时隐藏超出部分的内容 */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;
}转载于:https://blog.51cto.com/phzg03/1328960
：基于角色的身份验证和授权)
)
