javascript新增或者刪除table表格行程式碼例項

admin發表於2017-03-20
JavaScript行程

表格是常用的元素，雖然在佈局中已經鮮有使用，已經基本被div css所取代，但是在組織表格資料方面還是有很大的優勢的，比使用div css要來的方便，新增或者刪除一行也就是其中的tr更是最為常見的操作，下面就通過程式碼例項簡單介紹一下如何實現此效果。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script type="text/javascript"> 
function add(){ 
  for(var i=0;i<thetable.rows.length;i++)
  { 
    var eachRow=thetable.rows[i]; 
    if(eachRow.cells[0].innerHTML==num.value)
    { 
      alert("編號已經存在！"); 
      return ; 
    } 
  } 
  var newTableRow=thetable.insertRow(thetable.rows.length); 
  newTableRow.insertCell(0).innerHTML=num.value; 
  newTableRow.insertCell(1).innerHTML=course.value; 
  newTableRow.insertCell(2).innerHTML=anthor.value; 
}
function del(){
  thetable.deleteRow(thetable.rows.length-1);
} 
window.onload=function()
{
  var oadd=document.getElementById("add");
  var odel=document.getElementById("del");
   
  oadd.onclick=function(){add()}
  odel.onclick=function(){del()}
}
</script>
</head>
<body>
<table id="thetable" border="1">
  <tr>
    <td>序號</td>
    <td>教程</td>
    <td>作者</td>
  </tr>
  <tr>
    <td>1</td>
    <td>javascript教程</td>
    <td>antzone</td>
  </tr>
  <tr>
    <td>2</td>
    <td>div css教程</td>
    <td>螞蟻部落</td>
  </tr>
</table>
<ul>
  <li>序號:<input id="num" type="text" value=""></li>
  <li>教程:<input id="course" type="text" value=""></li>
  <li>作者:<input id="anthor" type="text" value=""></li>
  <li>
    <input type="button" value="新增" id="add" />
    <input type="button" value="刪除最後一行" id="del"/>
  </li>
</ul>
</body>
</html>

以上程式碼實現了我們的要求，可以刪除或者新增一行，程式碼比較簡單這裡就不多介紹了，可以參閱相關閱讀。

相關閱讀:

1.rows集合可以參閱表格table rows集合用法簡單介紹一章節。 

2.innerHTML屬性可以參閱js innerHTML一章節。

3.insertRow()函式可以參閱js insertRow()一章節。 

4.insertCell()函式可以參閱js insertCell()一章節。 

5.deleteRow()函式可以參閱js deleteRow()一章節。

相關文章