利用js控制table

最新推荐文章于 2023-02-06 00:32:16 发布

xiaorongqiu

最新推荐文章于 2023-02-06 00:32:16 发布

阅读量145

点赞数

分类专栏： JavaScript 文章标签： JavaScript HTML ViewUI

本文链接：https://blog.csdn.net/xiaorongqiu/article/details/83613946

版权

JavaScript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1. 存在如下一个五行五列的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>