JavaScript操作表格全功能展示

 

请复制代码到本地，保存为任意 html文件，运行即可看到效果。

< html >
< head >
< title > Sample (DHTML Dude) </ title >
< style >
  TR  ... {background-color: white; color: black; font-family: verdana; font-size: 20; font-weight: bold;}
</ style >
< xml >
< MSHelp:Keyword Index = " A "  Term = " tableedit " />
</ xml >
</ HEAD >      <!--  TOOLBAR_START  --><!--  TOOLBAR_EXEMPT  --><!--  TOOLBAR_END  -->  
< body style = " font-family: verdana " >
< h2 > Table Editor </ h2 >
< br >
< h3 > 单击选择单元格，按下Alt键选择一行！ </ h3 >
< br >
< div id = TableContainer >
< table id = TheTable border = 1  style = " border-collapse: collapse; table-layout: fixed " >
   < tbody >
      < tr >< td > Cell  1 , 1 </ td >< td > Cell  1 , 2 </ td >< td > Cell  1 , 3 </ td ></ tr >
      < tr >< td > Cell  2 , 1 </ td >< td > Cell  2 , 2 </ td >< td > Cell  2 , 3 </ td ></ tr >
      < tr >< td > Cell  3 , 1 </ td >< td > Cell  3 , 2 </ td >< td > Cell  3 , 3 </ td ></ tr >
   </ tbody >
</ table >
</ div >

< br >< br >< br >

< input id = ButtonAddRow style = " width: 200px; "  type = button value = " Add Row "  onClick = " addRow() " >< br >
< input id = ButtonRemoveRow style = " width: 200px; "  type = button value = " Remove Row "  onClick = " removeRow() " >< br >
< input id = ButtonAddCell style = " width: 200px; "  type = button value = " Add Cell "  onClick = " addCell() " >< br >
< input id = ButtonRemoveCell style = " width: 200px; "  type = button value = " Remove Cell "  onClick = " removeCell() " >< br >
< input id = ButtonMoveUp style = " width: 200px; "  type = button value = " Move Up "  onClick = " moveUp() " >< br >
< input id = ButtonMoveDown style = " width: 200px; "  type = button value = " Move Down "  onClick = " moveDown() " >< br >
< input id = ButtonMoveLeft style = " width: 200px; "  type = button value = " Move Left "  onClick = " moveLeft() " >< br >
< input id = ButtonMoveRight style = " width: 200px; "  type = button value = " Move Right "  onClick = " moveRight() " >< br >
< input id = ButtonEditContents style = " width: 200px; "  type = button value = " Edit Contents "  onClick = " editContents(); " >
< input type = text style = " display: none; width: 400px; "  id = EditCell >< br >
< input id = ButtonEditStyle style = " width: 200px; "  type = button value = " Edit Table Style "  onClick = " editStyle(); " >
< input type = text style = " display: none; width: 400px; "  id = EditStyle >< br >
< script >
var  lastSelection  =   null ;

ButtonAddRow.setExpression( " disabled " ,  " nothingSelected(lastSelection) " );
ButtonRemoveRow.setExpression( " disabled " ,  " ! rowSelected(lastSelection) " );
ButtonAddCell.setExpression( " disabled " ,  " nothingSelected(lastSelection) " );
ButtonRemoveCell.setExpression( " disabled " ,  " ! cellSelected(lastSelection) " );
ButtonMoveUp.setExpression( " disabled " ,  " ! rowSelected(lastSelection) " );
ButtonMoveDown.setExpression( " disabled " ,  " ! rowSelected(lastSelection) " );
ButtonMoveLeft.setExpression( " disabled " ,  " ! cellSelected(lastSelection) " );
ButtonMoveRight.setExpression( " disabled " ,  " ! cellSelected(lastSelection) " );
ButtonEditContents.setExpression( " disabled " ,  " (! cellSelected(lastSelection)) || (EditCell.style.display == '') " );
ButtonEditStyle.setExpression( " disabled " ,  " (EditStyle.style.display == '') " );
ButtonEditStyle.setExpression( " value " ,  " 'Edit ' + whatIsSelected(lastSelection) + ' Style' " );

function  select(element)  ... {
  var e, r, c;
  if (element == null) ...{
    e = window.event.srcElement;
  } else ...{
    e = element;
  }
  if ((window.event.altKey) || (e.tagName == "TR")) ...{
    r = findRow(e);
    if (r != null) ...{
      if (lastSelection != null) ...{
        deselectRowOrCell(lastSelection);
      }
      selectRowOrCell(r);
      lastSelection = r;
    }
  } else ...{
    c = findCell(e);
    if (c != null) ...{
      if (lastSelection != null) ...{
        deselectRowOrCell(lastSelection);
      }
      selectRowOrCell(c);
      lastSelection = c;
    }
  }

  window.event.cancelBubble = true;
}  

TableContainer.onclick  =  select;

function  cancelSelect()  ... {

  if (window.event.srcElement.tagName != "BODY") 
    return;

  if (lastSelection != null) ...{
    deselectRowOrCell(lastSelection);
    lastSelection = null;
  }
}

document.onclick  =  cancelSelect;

function  findRow(e)  ... {
  if (e.tagName == "TR") ...{
    return e;
  } else if (e.tagName == "BODY") ...{
    return null;
  } else ...{
    return findRow(e.parentElement);
  }
}

function  findCell(e)  ... {
  if (e.tagName == "TD") ...{
    return e;
  } else if (e.tagName == "BODY") ...{
    return null;
  } else ...{
    return findCell(e.parentElement);
  }
}

function  deselectRowOrCell(r)  ... {
  r.runtimeStyle.backgroundColor = "";
  r.runtimeStyle.color = "";
  //r.runtimeStyle.fontFamily = "Verdana";
}

function  selectRowOrCell(r)  ... {
  r.runtimeStyle.backgroundColor = "darkblue";
  r.runtimeStyle.color = "white";
  //r.runtimeStyle.fontFamily = "Verdana";
}

function  addRow()  ... {
  var r, p, nr;
  if (lastSelection == null) ...{
    r = null;
    p = TheTable.children[0];
  } else ...{
    r = lastSelection;

    if (r.tagName == "TD") ...{
      r = r.parentElement;
    }

    p = r.parentElement;
  }

  nr = document.createElement("TR");

  p.insertBefore(nr, r);

  select(nr);

  addCell();

  return nr;    
}

function  removeRow()  ... {
  var r, p, nr;
  if (lastSelection == null)
    return false;

  r = lastSelection;

  if (r.tagName == "TD") ...{
    r = r.parentElement;
  }

  p = r.parentElement;

  p.removeChild(r);

  lastSelection = null;
 
  return r; 
}

function  addCell()  ... {
  var r, p, c, nc, text;
  if (lastSelection == null)
    return false;

  r = lastSelection;

  if (r.tagName == "TD") ...{
    r = r.parentElement;
    c = lastSelection;
  } else ...{
    c = null;
  }

  nc = document.createElement("TD");
  text = document.createTextNode("New Cell");

  nc.insertBefore(text, null);
  r.insertBefore(nc, c);

  select(nc);

  return nc;
}

function  removeCell()  ... {
  var c, p, nr;
  if (lastSelection == null)
    return false;

  c = lastSelection;

  if (c.tagName != "TD") ...{
    return null;
  }

  p = c.parentElement;

  p.removeChild(c);

  lastSelection = null;
 
  return c; 
}

function  editContents()  ... {
  var c, p, nr;
  if (lastSelection == null)
    return false;

  c = lastSelection;

  if (c.tagName != "TD") ...{
    return null;
  }

  EditCell.style.display = "";

  EditCell.value = c.innerHTML;

  c.setExpression("innerHTML", "EditCell.value");

  EditCell.focus();

  EditCell.onblur = unhookContentsExpression;
}

function  unhookContentsExpression()  ... {
  lastSelection.removeExpression("innerHTML");
  EditCell.value = '';
  EditCell.style.display = "none";
}

function  editStyle()  ... {
  var c;

  if (lastSelection == null) ...{
    c = TheTable;
  } else ...{
    c = lastSelection;
  }
  
  EditStyle.style.display = "";

  EditStyle.value = c.style.cssText;

  c.style.setExpression("cssText", "EditStyle.value");

  EditStyle.focus();

  EditStyle.onblur = unhookStyleExpression;
}

function  unhookStyleExpression()  ... {
  var c;

  if (lastSelection == null) ...{
    c = TheTable;
  } else ...{
    c = lastSelection;
  }
  c.style.removeExpression("cssText");

  EditStyle.value = '';
  EditStyle.style.display = "none";
}

function  moveUp()  ... {
  var r, p, ls;
  if (lastSelection == null)
    return false;

  r = lastSelection;

  if (r.tagName != "TR") ...{
    return null;
  }

  if (r.rowIndex == 0) 
    return;

  ls = r.previousSibling;

  p = ls.parentElement;

  p.insertBefore(r, ls);

  return r;
}

function  moveDown()  ... {
  var r, p, ls;
  if (lastSelection == null)
    return false;

  r = lastSelection;

  if (r.tagName != "TR") ...{
    return null;
  }

  ls = r.nextSibling;

  if (ls == null)
    return null;

  p = ls.parentElement;

  ls = ls.nextSibling;

  p.insertBefore(r, ls);

  return r;
}

function  moveLeft()  ... {
  var c, p, ls;
  if (lastSelection == null)
    return false;

  c = lastSelection;

  if (c.tagName != "TD") ...{
    return null;
  }

  ls = c.previousSibling;

  if (ls == null)
    return null;

  p = ls.parentElement;

  p.insertBefore(c, ls);

  return c;
}

function  moveRight()  ... {
  var c, p, ls;
  if (lastSelection == null)
    return false;

  c = lastSelection;

  if (c.tagName != "TD") ...{
    return null;
  }

  ls = c.nextSibling;

  if (ls == null)
    return null;

  p = ls.parentElement;

  ls = ls.nextSibling;

  p.insertBefore(c, ls);

  return c;
}

function  nothingSelected()  ... {
  return (lastSelection == null);
}

function  rowSelected()  ... {
  var c;
  if (lastSelection == null)
    return false;

  c = lastSelection;

  return (c.tagName == "TR")
}

function  cellSelected()  ... {
  var c;
  if (lastSelection == null)
    return false;

  c = lastSelection;

  return (c.tagName == "TD")
}

function  whatIsSelected()  ... {
  if (lastSelection == null) 
    return "Table";
  if (lastSelection.tagName == "TD") 
    return "Cell";
  if (lastSelection.tagName == "TR")
    return "Row";
}

</ script >