【转】利用js控制table -

sisi1984117

浏览: 158101 次
性别:
来自: 上海

最近访客更多访客>>

baiyaj

sundyman

wangsong76

zzcvs1

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

【转】利用js控制table

JavaScript JSP HTML

//存在如下一个五行五列的table

<html>
  <table id="MyTable" cellspacing="0" cellpadding="2" width="100%" align="center" border="0">
    <tr>
      <td>0,0</td>
      <td>0,1</td>
      <td>0,2</td>                
    </tr>
    <tr>
      <td>1,0</td>
      <td>1,1</td>
      <td>1,2</td>               
    </tr>
    <tr>
      <td>2,0</td>
      <td>2,1</td>
      <td>2,2</td>               
    </tr>     
  <table>
</html>


2. 通过id找到table，set/get某些属性

<script type="text/javascript">
  //通过id取得table对象
  var myTable = document.getElementById("MyTable");
  //取得table的行数
  var rows = myTable.rows.length;
  //取得第二行第二列单元格的值
  var cellValue = myTable.rows[1].cells[1].innerHTML;
  //设置第二行第二列单元格的值
  myTable.rows[1].cells[1].innerHTML = "第二行第二列";
</script>


3. 在table末尾处添加一行

<script type="text/javascript">
  function newRows(){
    var myTable = document.getElementById('MyTable');
    var rows = myTable.rows.length;
    if(rows >= 8){
      alert("最多有八行");
      return;
    }
    var newrow = table.insertRow(rows-1);
    var newcell1 = newrow.insertCell();
    var newcell2 = newrow.insertCell();
    newcell1.setAttribute('align','center');
    newcell2.innerHTML = '<input type="text" size="50" id="myText" value="myText"/>';    
  }
</script>


4. 在table中删除最后一行

<script type="text/javascript">
  function deleteRows(){
    var myTable = document.getElementById('MyTable');
    var rows = myTable.rows.length;
    if (rows <= 3){
      alert("至少有三行");
      return;
    }else{
      table.deleteRow(rows-1);
    }
  }
</script>

//文章出处：飞诺网//(www.firnow.com):http://dev.firnow.com/course/4_webprogram/jsp/jsp_js/20100721/477614.html

分享到：