刪除table表格行和列程式碼例項

antzone發表於2017-03-14

表格是最為有效的組織資料的元素，當然對它的操作也是相當重要的，下面就通過程式碼例項介紹一下對它的一項重要操作，那就是刪除表格中的行和列，程式碼例項如下:

一.刪除指定的行:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>螞蟻部落</title>  
<style type="text/css"> 
.table{ 
  width:300px; 
  height:100px; 
  border:1px solid #ccc; 
  border-collapse:collapse; 
} 
.table td,.table th { 
  border:1px solid #ccc; 
  padding:5px; 
} 
.odd{
  background:#CCC;
}
.even{
  background:#609;
}
</style> 
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
  $('.table tr:eq(2)').remove();
})
</script> 
</head> 
<body> 
<table class="table"> 
  <thead> 
    <tr> 
      <th>螞蟻部落一</th> 
      <th>螞蟻部落二</th> 
    </tr> 
  </thead> 
  <tr> 
    <td>javascript教程</td> 
    <td>jQuery教程</td> 
  </tr> 
  <tr> 
    <td>HTML教程</td> 
    <td>div css教程</td> 
  </tr> 
  <tr> 
    <td>螞蟻部落一</td> 
    <td>螞蟻部落二</td> 
  </tr> 
</table> 
</body> 
</html>

以上程式碼實現可以刪除表格的第三行，程式碼比較簡單可以參閱相關閱讀。

相關閱讀:

1.remove()函式可以參閱jQuery remove()一章節。 

2.:eq()可以參閱jQuery :eq()一章節。

二.刪除表格的列:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>螞蟻部落</title>  
<style type="text/css"> 
.table{ 
  width:300px; 
  height:100px; 
  border:1px solid #ccc; 
  border-collapse:collapse; 
} 
.table td,.table th { 
  border:1px solid #ccc; 
  padding:5px; 
} 
.odd{
  background:#CCC;
}
.even{
  background:#609;
}
</style> 
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
  $(".table tr td:nth-child(1)").remove();
})
</script> 
</head> 
<body> 
<table class="table"> 
  <tr> 
    <td>javascript教程</td> 
    <td>jQuery教程</td> 
  </tr> 
  <tr> 
    <td>HTML教程</td> 
    <td>div css教程</td> 
  </tr> 
  <tr> 
    <td>螞蟻部落一</td> 
    <td>螞蟻部落二</td> 
  </tr> 
</table> 
</body> 
</html>

以上程式碼實現了我們的要求，可以刪除表格的第一列，原來非常的簡單，也就是刪除每一行的第一個單元格，也就可以刪除第一列了，:nth-child()可以參閱 jQuery :nth-child一章節。 

相關文章