利用js控制table

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>



你可能感兴趣的:(JavaScript,html)