JS 操作表格,添加/删除行列

发布时间:2009年03月25日      浏览次数:1092 次
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script>
var currRow = 0;
var currCell= 0;
//添加行
function add_rows(obj){
      if(currRow >= 0 && currRow < obj.rows.length){
            var maxCell = obj.rows[0].cells.length;
            obj.insertRow(currRow+1);
            for(var i=0;i<maxCell;i++){
                  obj.rows[currRow+1].insertCell(i);
                  obj.rows[currRow+1].cells[i].innerHTML=" ";
            }
            update_td_coordinate(obj);
      }
}
//添加列
function add_cols(obj){
      if(currCell >= 0 && currCell < obj.rows[0].cells.length){
            for(var i=0; i<obj.rows.length; i++){
                  obj.rows[i].insertCell(currCell+1);
                  obj.rows[i].cells[currCell+1].innerHTML=" ";
            }
            update_td_coordinate(obj);
      }
}
//删除行
function del_rows(obj){
      var rows = obj.rows.length;
      if( currRow >= 0 && currRow < rows-1 ){
            obj.deleteRow(currRow);
      }
      update_td_coordinate(obj);
}
//删除列
function del_cols(obj){
      if(currCell>=0 && currCell<obj.rows[0].cells.length-1){
            for(var i=0; i<obj.rows.length; i++){
                  obj.rows[i].deleteCell(currCell);
            }
      }
      update_td_coordinate(obj);
}
//定义兼容火狐垃圾的对象,该函数由表格中的onclick事件触发vent(event)
function vent(event){
      o = event.srcElement ? event.srcElement : event.target; //event.target是为了兼容火狐垃圾
}
//获取当前焦点所在行列坐标
function get_coordinate(obj){
//var o = event.srcElement; //此行注释不要了,此o的定义改为在上面的vent(event)中定义
if( o.tagName.toLowerCase() == "td" ){
            //currRow = o.parentElement .rowIndex; //此行由下面一行所代替,parentElement只在IE中支持
currRow = o.parentNode.rowIndex;
currCell = o.cellIndex;
            document.getElementById('row_num').value = currRow;
            document.getElementById('cell_num').value = currCell;
}else{
currRow = obj.rows.length-1;
      currCell = obj.rows[0].cells.length-1;
            document.getElementById('row_num').value = currRow;
            document.getElementById('cell_num').value = currCell;
}
      coordinate_Bgcolor(obj,currRow,currCell);
}
//计算显示各单元格的坐标值
function update_td_coordinate(obj){
      var maxRow = obj.rows.length;
      var maxCell = obj.rows[0].cells.length;
      for ( i=0; i<maxRow; i++ ){
            for ( j=0; j<maxCell; j++ ){
                  obj.rows[i].cells[j].innerHTML = "( "+i+" , "+j+" )";
            }      
      }
}
//坐标所在单元格背景变色
function coordinate_Bgcolor(obj,row,col){
      //清除所有单元格背景
      var maxRow = obj.rows.length;
      var maxCell = obj.rows[0].cells.length;
      for ( i=0; i<maxRow; i++ ){
            for ( j=0; j<maxCell; j++ ){
                  obj.rows[i].cells[j].bgColor = "ffffff";
            }      
      }
      //给选定单元格添加背景色
obj.rows[row].cells[col].bgColor = "cccccc";
}
</script>
<div align="center"><b>JS 操 作 表 格 示 例</b></div>
<br />
<input name="addrows" type="button" id="addrows" value="添加一行" onclick="add_rows(document.getElementById('tb_id'));" />
<input name="addrows" type="button" id="addrows" value="添加一列" onclick="add_cols(document.getElementById('tb_id'));" />
<input name="addrows" type="button" id="addrows" value="删除一行" onclick="del_rows(document.getElementById('tb_id'));" />
<input name="addrows" type="button" id="addrows" value="删除一列" onclick="del_cols(document.getElementById('tb_id'));" />
当前焦点所在位置:
<input name="row_num" type="text" id="row_num" value="0" size="5" />行
<input name="cell_num" type="text" id="cell_num" value="0" size="5" />列
<br />
<br />
<table width="100%" border="1" cellspacing="1" cellpadding="4" id="tb_id" onClick="vent(event);get_coordinate(this);">
<tr>
<td id="a">( 0 , 0 )</td>
</tr>
</table>
<br />
文章来源:桂林唯创网络
免责声明:本站相关技术文章信息部分来自网络,目的主要是传播更多信息,如果您认为本站的某些信息侵犯了您的版权,请与我们联系,我们会即时妥善的处理,谢谢合作!