關于范例有一點問題需要詢問各位大神
范例代碼：
<!DOCTYPE html>
<html>
?<head>
? <title> new document </title> ?
? <meta http-equiv="Content-Type" content="text/html; charset=gbk"/>? ?
? <script type="text/javascript"> ?
?? ? window.onload = function(){
?? ??? ?Highlight();
?? ? } ?
?? ? function addOne(obj){
?? ???? var tbody = document.getElementById('table').lastChild;?
?? ??? ?var tr = document.createElement('tr'); ?
?? ??? ?
?? ??? ? var td = document.createElement("td");
?? ??? ? td.innerHTML = "<input type='text'/>";
?? ??? ? tr.appendChild(td);
?? ??? ?
?? ??? ? td = document.createElement("td");?? ?
?? ??? ? td.innerHTML = "<input type='text'/>";
?? ??? ? tr.appendChild(td);
?? ??? ?
?? ??? ? td = document.createElement("td");?? ?
?? ??? ? td.innerHTML = "<a href='javascript:;' onclick='deleteRow(this)'>刪除</a>";
?? ??? ? tr.appendChild(td);? ?
?? ??? ?
?? ??? ? tbody.appendChild(tr);? ?
?? ??? ?Highlight();
? ??? ? }
?? ? function deleteRow(obj){
?? ???? var tbody = document.getElementById('table').lastChild; ?
?? ??? ?var tr = obj.parentNode.parentNode;
?? ??? ? tbody.removeChild(tr);
?? ? }
?? ? function Highlight(){
?? ??? ?var tbody = document.getElementById('table').lastChild;?? ?//為什么這里要獲取table元素節(jié)點的最后一個子節(jié)點？
?? ???? trs = tbody.getElementsByTagName('tr');?? //為什么要用tbody.getElementsByTageName("tr")而不是tbody=document.getElementById("table"); trs=tbody.getElementsByTagName("tr");?
?? ??? ?for(var i =1;i<trs.length;i++){
?? ??? ??? ?trs[i].onmouseover = function(){
?? ??? ??? ??? ?this.style.backgroundColor ="#f2f2f2";
?? ??? ??? ?}
?? ??? ??? ?trs[i].onmouseout = function(){
?? ??? ??? ??? ?this.style.backgroundColor ="#fff";
?? ??? ??? ?}
?? ??? ?} ?
?? ? }
? </script>
?</head>
?<body>
?? ??? <table border="1" width="50%" id="table">
?? ??? <tr>
?? ??? ?<th>學號</th>
?? ??? ?<th>姓名</th>
?? ??? ?<th>操作</th>
?? ??? </tr> ?
?? ??? <tr>
?? ??? ?<td>xh001</td>
?? ??? ?<td>王小明</td>
?? ??? ?<td><a href="javascript:;" onclick="deleteRow(this)">刪除</a></td>
?? ??? </tr>
?? ??? <tr>
?? ??? ?<td>xh002</td>
?? ??? ?<td>劉小芳</td>
?? ??? ?<td><a href="javascript:;" onclick="deleteRow(this)">刪除</a></td>
?? ??? </tr> ?
?? ??? </table>
?? ??? <input type="button" value="添加一行" onclick="addOne()" />
?</body>
</html>
2022-03-25
調節(jié)電腦系統(tǒng)的聲音應該會好些inputtype="button"
2018-07-05
先說說你給的這個范例的代碼，再介紹一下我自己寫的代碼，范例當中的代碼，我個人是覺得有些畫蛇添足，這是我反復進行了測試得出的結論。
var tbody = document.getElementById('table').lastChild;?
trs = tbody.getElementsByTagName('tr'); ?//取ID為”table“的表格最后一個子節(jié)點的所有名為TR的標簽，并返回TR標簽對象數(shù)組
這段代碼實際等同于：
var tbody = document.getElementById('table');?
trs = tbody.getElementsByTagName('tr'); ?//取ID為”table“的表格下面的所有名為TR的標簽，并返回TR標簽對象數(shù)組（你會發(fā)現(xiàn)跟我自己寫的代碼一樣）
總結：這兩段代碼看似不同，實則一樣；打個比如，要驗證一個人的身份，你可以通過見到這個人本人（我把這種方式比作取ID為”table“的表格），或者校驗這個人的DNA（我把這種方式比作取ID為”table“的表格最后一個子節(jié)點），兩種方式均能驗證這個人是你要的人（也就是得出你要找的訪問getElementByTagName方法的對象了）。不知道這個比如你能否懂，也即是說var tbody=document.getElementById('table').lastChild;和var tbody=document.getElementById('table'); 兩段代碼的意圖就是定位訪問getElementsByTagName方法的對象，它們定位的對象都是ID為”table“的標簽對象。
我個人實現(xiàn)這個功能的時候寫的代碼是：
var tr_nodes = document.getElementsByTagName("tr");//直接取BODY當中所有名為TR的標簽，并返回TR標簽對象數(shù)組，因為我知道BODY當中只有一個表格，所以這是比較簡潔的方式
之后考慮代碼的適用性，改成了下面的代碼：
var table_node = document.getElementById('table');
var tr_nodes = table_node.getElementsByTagName("tr");//取ID為”table“的表格下面的所有名為TR的標簽，并返回TR標簽對象數(shù)組，這是為了避免BODY當中有多個表格的情況，不能精準取得你想要的TR對象數(shù)組
以上三種方法均已經(jīng)測試有效，我個人覺得最后一種方法比較適應，范例給的參考代碼有點把學習的人帶入死胡同的感覺，咋一看確實一頭霧水，深刻理解代碼意圖，其實都在一樣的事情。