[JavaScript]事件切换之－删除和恢复效果 + 表格增加行，删除行

最新推荐文章于 2022-07-06 11:12:23 发布

PeakRyuu

最新推荐文章于 2022-07-06 11:12:23 发布

阅读量869

点赞数

分类专栏： JavaScript/HTML 文章标签： javascript function action input

本文链接：https://blog.csdn.net/PeakRyuu/article/details/6598622

版权

JavaScript/HTML 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

// 记录被删除的行索引
var deletedRows = new Array();

function resetDataTable(tableId, typeName, typeId, action){
  if(!document.getElementById(tableId)){
    // 判断元素是否存在，避免出现JS错误
    return;
  }
  if(action == "cancel") {
    clearDataTable(tableId);
  } else {
    var mergeServType = document.forms[0][typeName].value;
    if(mergeServType){
      var dataTable = document.getElementById(tableId);
      var mergeServTypes = mergeServType.split(",");
      var typeIds = document.forms[0][typeId].value.split(",");
      if(action != "add" || action != ""){
        clearDataTable(tableId);
      }
      for(i = 0; i < mergeServTypes.length; i++){
        // 表格增加一行
        var newRow = dataTable.insertRow();
        // 行中增加一列
        var newCel1 = newRow.insertCell();
        newCel1.width="17px";
        newCel1.innerHTML = "<img src=\"<%=ctx%>/images/delete.gif\" alt=\"删除\" style=\"cursor: pointer\" οnclick=\"deleteData("+tableId+", '"+i+"')\"/>";
        var newCel2 = newRow.insertCell();
        newCel2.innerText=mergeServTypes[i];
        newCel2.innerHTML+="<input type=\"hidden\" value=\""+typeIds[i]+"\"/>";
        if(action == "add"){
          for(j = 0; j < deletedRows.length; j++){
            if(i == deletedRows[j]){
              deleteData(dataTable, i);
            }
          }
        }
      }
    }
  }
  deletedRows = new Array();
}

// 清除表中所有行
function clearDataTable(tableId){
  var dataTable = document.getElementById(tableId);
  var trCount = dataTable.rows.length;
  for(i = 0; i < trCount; i++){
    dataTable.deleteRow(0);
  }
}

function deleteData(dataTable, rowId){
  dataTable.rows[rowId].cells[1].style.color="rgb(180,180,180)";
  dataTable.rows[rowId].cells[1].style.textDecorationLineThrough=true;
  dataTable.rows[rowId].cells[0].firstChild.src="<%=ctx%>/images/trans.bmp";
  dataTable.rows[rowId].cells[0].firstChild.alt="恢复";
  // 改变事件
  dataTable.rows[rowId].cells[0].firstChild.οnclick=function(){rollback(dataTable, rowId)};
}

function rollback(dataTable, rowId){
  dataTable.rows[rowId].cells[1].style.color="rgb(0,0,0)";
  dataTable.rows[rowId].cells[1].style.textDecorationLineThrough=false;
  dataTable.rows[rowId].cells[0].firstChild.src="<%=ctx%>/images/delete.gif";
  dataTable.rows[rowId].cells[0].firstChild.alt="删除";
  // 改变事件
  dataTable.rows[rowId].cells[0].firstChild.οnclick=function(){deleteData(dataTable, rowId)};
}

function setTypeId(dataTable, id){
  if(!dataTable) return;
   var dataRows1 = dataTable.rows;
   var ids = "";
   for(i = 0; i < dataRows1.length; i++){
     if(!dataRows1[i].cells[1].style.textDecorationLineThrough){
       ids += dataRows1[i].cells[1].lastChild.value + ",";
     }
   }
  // 去除末尾多于的逗号
   ids = ids.substr(0,ids.length-1);
   document.forms[0][id].value=ids;
}

// 返回已经被删除的行索引
function getDeletedRowIndex(tableId){
  dataRows = document.getElementById(tableId).rows;
  for(i = 0; i < dataRows.length; i++) {
    if(dataRows[i].cells[1].style.textDecorationLineThrough) {
      deletedRows.push(i);
    }
  }
}