网页表格编辑功能的实现

<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>网页表格编辑</title>
</head><body>
<center>
<p>
<div ID="edittab">
  <table border="1" width="634" id="mytable">
    <tr align=center>
     <td width="75" ondrop=tt(this) onmousedown=sel(this)>A1</td>
     <td width="75" ondrop=tt(this) onmousedown=sel(this)><font size="5">A2</font></td>
     <td width="74" ondrop=tt(this) onmousedown=sel(this)>A3</td>
     <td width="75" ondrop=tt(this) onmousedown=sel(this)><font size="5" color="#FF0000">A4</font></td>
     <td width="75" ondrop=tt(this) onmousedown=sel(this)>A5</td>
     <td width="74" ondrop=tt(this) onmousedown=sel(this)><font size="5" color="#00FF00">A6</font></td>
    </tr>
    <tr align=center>
     <td width="75" ondrop=tt(this) onmousedown=sel(this)>B1</td>
     <td width="75" ondrop=tt(this) onmousedown=sel(this)><font size="5" color="#FF0000">B2</font></td>
     <td width="74" ondrop=tt(this) onmousedown=sel(this)>B3</td>
     <td width="75" ondrop=tt(this) onmousedown=sel(this)><font size="5">B4</font></td>
     <td width="75" ondrop=tt(this) onmousedown=sel(this)>B5</font></td>
     <td width="74" ondrop=tt(this) onmousedown=sel(this)>B6</td>
    </tr>
    <tr align=center>
     <td width="75" ondrop=tt(this) onmousedown=sel(this)><font size="5">C1</font></td>
     <td width="75" ondrop=tt(this) onmousedown=sel(this)>C2</td>
     <td width="74" ondrop=tt(this) onmousedown=sel(this)><font size="5" color="#FF0000">C3</font></td>
     <td width="75" ondrop=tt(this) onmousedown=sel(this)>C4</td>
     <td width="75" ondrop=tt(this) onmousedown=sel(this)><font size="5" color="#0000FF">C5</font></td>
     <td width="74" ondrop=tt(this) onmousedown=sel(this)>C6</td>
    </tr>
  </table>
</div>
</body>
</html>
<script type="text/javascript">
 edittab.contentEditable = true;
</script>
 以上代码使表格可编辑
<script type="text/javascript">
row=mytable.rows.length; //表格共有几行
col=mytable.cells.length/row;  //表格共有几列
var row1=0; //被选择的对象行
var col1=0; //被选择的对象列
var row2=0; //目的对象行
var col2=0; //目的对象列
var htmtext="";
var intext=""
var Nc=0; // 被选择的对象个数function sel(d){ // 获取被选择的对象
  row1=d.parentNode.rowIndex; // 被选择的对象行
  col1=d.cellIndex, // 被选择的对象列
  htmtext=document.selection.createRange().htmlText;
  intext=document.selection.createRange().text;
  tx = htmtext.split("<TD");
  Nc = tx.length-1
}function tt(d){
  row2=d.parentNode.rowIndex; //目的所在行
  col2=d.cellIndex, //目的所在列
  o1=mytable.rows[row1];
  o2=mytable.rows[row2];
// 当出现跨行选择时，为避免导致插入新行，故作错误处理，不作实际操作
  tx = htmtext.split("<TR"); // 判断是否存在跨行选择，
  if(tx.length>1){d.swapNode(tmp);return} // 有则进行空操作（必须的，避免插入表格）
// 当从一行拖放到另一行时，避免出现拖放的单元格数多于目的地所余下的单元格数。
  if(col2+Nc>col){d.swapNode(tmp);return} // 有则进行空操作  col1=tds()
  for (i=0;i<Nc;++i){
     o2.cells[col2+i].innerText="";
     o2.cells[col2+i].swapNode(o1.cells[col1+i]);
  }
}function tds(){ // 查找被选择对象的起始列
  tmp=""
  for(i=0;i<=col-Nc;++i){
    for(k=0;k<Nc;++k){
      tmp +=mytable.rows[row1].cells[k+i].innerText;
        }
    if(intext==tmp){return(i);}else{tmp=""}
  }
}
</script>