利用js對table動態增長和刪除行（附帶table樣式，鼠標滑過和點擊樣式）

時間  2021-08-13
標籤 css ide 測試 this spa firefox orm htm 對象 索引 欄目 JavaScript 简体版
原文   原文鏈接

看了一下午各類大牛關於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>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<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;
}
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程