javascript操作tabel方法小结

最新推荐文章于 2022-01-15 17:24:53 发布

爆血管的

最新推荐文章于 2022-01-15 17:24:53 发布

阅读量648

点赞数

文章标签： javascript function button xhtml input jquery

本文链接：https://blog.csdn.net/nanjwangc/article/details/7602197

版权

前段时间有人问起原生javascript操作表格的一些写法，百度了一把，顺便把表格一些专门的方法整理了一下，写个demo存着。

获取某行：objtable.rows[index]

获取某列:objtable.rows[rowindex].cells[index]

获取当前行号:objrow.rowIndex

插入一行：insertRow(index) 插入一行到index所在行之前并返回新建的行对象

删除一行：deleteRow() 不传参数，表示删除第一行

插入一个单元格：objrow.insertCell(index)

删除一个单元格;objrow.deletetCell(index)

*insertRow插入一行，插入的是空行，即<tr></tr>，还得继续插入单元格。

*deletetCell删除单元格，当一行所有的单元格都删完，就剩下空行<tr></tr>

demo代码如下，样式没有时间写

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js操作表格demo</title>
<style type="text/css">
body{ background: repeat-x}
</style>
</head>

//添加一行至第一行
function addfirstRow() {

  var newRow = objtable.insertRow(1);
  //newRow.rowIndex获得行数
  addCell(newRow);

  }
//添加一行至最后一行
  function addlastRow() {
  rownum = objtable.rows.length;
  var newRow = objtable.insertRow(rownum);
  addCell(newRow);
  }

//添加一行至特定行
  function addOneRow(){
   var inserRowIndex = document.getElementById("asrowIndex").value;
   //alert(inserRowIndex);
   var newRow = objtable.insertRow(inserRowIndex);
   addCell(newRow);
   }

//添加一个单元格至第一行最后
function addlastcell_row(){
  var fistrow = objtable.rows[1];
  var newcell = fistrow.insertCell(fistrow.cells.length);
   newcell.innerHTML ="222";
  }

//删除第一行
function deletefirstrow(){
  deleterow(1);

  }

//删除最后一行
function deletelastrow(){
  deleterow();

  }

//删除某行某列
function deleterowcell(){
  var delrow = document.getElementById("delrow").value;
  var delcell = document.getElementById("delcell").value;

  var row = objtable.rows[delrow];
  row.deleteCell(delcell-1);
  //如果被删成空行，继续删除行
  if(!row.cells.length){
   objtable.deleteRow(delrow);
   }

  }
//删除某行
function deleterow(delrow){
  objtable.deleteRow(delrow);
  }


  //循环添加列
  function addCell(newRow){
   for(var i=0;i<cellnum; i++){
   var newcell = newRow.insertCell(0);
   newcell.innerHTML ="1111";
   }

   }

//鼠标经过行变色
window.οnlοad= function(){
for(var x = 0; x<objtable.rows.length;x++){

  objtable.rows[x].οnmοusemοve=function(){
   this.style.background="#e0e0e0";}

  objtable.rows[x].οnmοuseοut=function(){
   this.style.background="#fff";}
  }

}
</script>
</body>
</html>

鼠标移动到每行变色，如果用jquery写更简单

爆血管的

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript操作tabel方法小结

前段时间有人问起原生javascript操作表格的一些写法，百度了一把，顺便把表格一些专门的方法整理了一下，写个demo存着。获取某行：objtable.rows[index]获取某列:objtable.rows[rowindex].cells[index]获取当前行号:objrow.rowIndex插入一行：insertRow(index) 插入一行到index所在行之前并返回
复制链接

扫一扫