對於文件中元素的選擇

  • Posted by Beata on 十月 27th, 2005 filed in javascript

getElementById(xx)
選擇文件中 id=xx 的元素

getElementsByTagName(’tr’)
選擇文件中 tag 名為 tr 的元素 (ex.<tr>…</tr>)

document.element.innerHTML= str
innerHTML 的作用在於可以在選擇的元件中插入敘述之後的 str
document.element 代表選擇的元件

今假設有一個表格 id 名為 table，總共有 5 列 <tr> 標籤，每列有 3 行 <td> 標籤

此範例僅是舉例之用，若真要存取表格之內的欄位，建議使用 table.rows[row] 與 table.rows[row].cells[cell] 之屬性。

html · [高亮] · [原始]

  1. <table id="table">
  2. <tr><td>1-1</td><td>1-2</td><td>1-3</td></tr>
  3. <tr><td>2-1</td><td>2-2</td><td>2-3</td></tr>
  4. <tr><td>3-1</td><td>3-2</td><td>3-3</td></tr>
  5. <tr><td>4-1</td><td>4-2</td><td>4-3</td></tr>
  6. <tr><td>5-1</td><td>5-2</td><td>5-3</td></tr>
  7. </table>
<table id="table">
<tr><td>1-1</td><td>1-2</td><td>1-3</td></tr>
<tr><td>2-1</td><td>2-2</td><td>2-3</td></tr>
<tr><td>3-1</td><td>3-2</td><td>3-3</td></tr>
<tr><td>4-1</td><td>4-2</td><td>4-3</td></tr>
<tr><td>5-1</td><td>5-2</td><td>5-3</td></tr>
</table>

[高亮] · [原始] · html

若想要動態的改變此表格第五個 <tr> 之中的第三個 <td> 內容為「我被改變了」
可採取以下方法:

javascript · [高亮] · [原始]

  1. var a = document.getElementById(‘table’).getElementsByTagName(‘tr’);
  2. var b = a[4].getElementsByTagName(‘td’);
  3. b[2].innerHTML = ‘我被改變了’;
  4. // a 代表 <tr> 陣列
  5. // b 代表 <tr> 陣列第五個項目中的 <td> 陣列
  6. // b[2] 代表第五個 <tr> 中的第三個 <td>
  7. // 改變其中內容的指令 innerHTML 在「=」 之後加上字串
var a = document.getElementById(\'table\').getElementsByTagName(\'tr\');
var b = a[4].getElementsByTagName(\'td\');
b[2].innerHTML = \'我被改變了\';
// a 代表 <tr> 陣列
// b 代表 <tr> 陣列第五個項目中的 <td> 陣列
// b[2] 代表第五個 <tr> 中的第三個 <td>
// 改變其中內容的指令 innerHTML 在「=」 之後加上字串

[高亮] · [原始] · javascript


12 Responses to “對於文件中元素的選擇”

  1. brianchin Says:
    一月 20th, 2006 at 6:50 下午

    請問，上述的例子中，如果想要找出哪一個內容為「我被改變了」，要如何做？有沒有不用迴圈的方法？

  2. Beata Says:
    一月 20th, 2006 at 11:52 下午

    雖然不太理解你的意思。
    但就我所知的部份解釋一下好了。
    　
    getElementsByTagName(’td’)
    這一句所傳回的資訊是陣列型態的
    　
    而 innerHTML 則是將前面所指派的項目內容全部替換為後面的字串(str)
    　
    所以如果以本篇的例子而言
    b[2] 這個項目中的內容會被替換成「我被改變了」
    　
    希望這樣解釋不會太模糊^^

  3. brianchin Says:
    一月 21st, 2006 at 11:10 上午

    我的意思是，假設在那個表格下面放3個按鈕，每個按鈕一按下去就會有對應的”td”被改變背景顏色：

    每個按鈕會觸動下列程式：

    function changed(i){
    var a = document.getElementById(’table’).getElementsByTagName(’tr’);
    var b = a[4].getElementsByTagName(’td’);
    b[i].style.background=”yellow”;
    }

    上面這個script是偷你的例子改來的 :D

    但是我想要的效果是，在第二次按下其中一個按鈕後，只有它對應的那格會變成黃色，上次變成黃色的那個會回復成無色。我所能想到的方法以下兩種：

    (1)在第二次按下某個按鈕時，將每一格的背景色回復成無色，然後再讓第二次按的對應格變成黃色。

    (2)每次按下按鈕時，就先找出哪一格的背景是黃色，先把它變回無色，再讓這次按下的對應格變成黃色。

    第一個方法，我想不出怎麼寫。所以我問你第二個方法，要怎麼找出已經變成黃色的是哪一格？

  4. Beata Says:
    一月 21st, 2006 at 1:06 下午

    可以在函數中設定一個回傳值來當作判別條件。
    —————————————————————————————————–
    　
    　
    程式碼：
    　
    var rows = document.getElementById(’table’).getElementsByTagName(’tr’),
    　　// table 的所有 tr
    　　cols = rows[4].getElementsByTagName(’td’),
    　　// 第五個 tr 中的所有 td
    　　c = null;
    　　// 用以判別的回傳值，在此先將他設為空值
    　
    function changed(i){
    　　cols[i].style.backgroundColor=’yellow’;
    　　if (c != null && c != i) {
    　　　　cols[c].style.backgroundColor=’#FFF’;
    　　　　c = null;
    　　/*
    　　　如果回傳值不為空值且不是changed()目前的引數 i 的話
    　　　想必就是上次使用changed()時所留下的回傳值
    　　　所以將上次使用過的changed()回傳值做一下處理
    　　　處理過後，再次將它設為空值。
    　　*/
    　　}
    　　return c = i;
    　　// 設定回傳值 c 的內容就是目前的引數 i
    }
    　
    　
    按鈕：
    　
    <input type=”button” onclick=”changed(0)” value=”Change 0″ />
    <input type=”button” onclick=”changed(1)” value=”Change 1″ />
    <input type=”button” onclick=”changed(2)” value=”Change 2″ />

    —————————————————————————————————–
    ！上方程式部份的縮排使用全形空白，請記得替換掉唷～

  5. brianchin Says:
    一月 21st, 2006 at 10:40 下午

    喵大：

    我把你回覆的那段程式碼，都塞到function changed(i)裡面，結果效果仍是按過的都出現黃色背景，也就是，上次按的格子沒有回復成無色。

    另外，你提出使用”return”這個方法真是厲害，讓我矛塞頓開。

  6. Beata Says:
    一月 21st, 2006 at 11:08 下午

    唔～可是我測試都是正常的呢！
    將程式碼部份照你所說的修改了一下，我想可能發生的原因會是這裡。
    　
    ● c 這個回傳值必須是個全域變數，這樣函式使用過後其值才不會消失。
    　所以把 c 宣告在函式外面就能正常了。

  7. Beata Says:
    一月 21st, 2006 at 11:15 下午

    0.0 喵？是巴友嗎？
    歡迎蒞臨寒舍，雖然我已經幾百年沒更新了 ˊ.ˋ

    其實一開始依照直覺上的作法我還是使用迴圈
    停下來稍微想一想之後，或許使用回傳值這個方式會更簡便，效能上也會有顯著的提昇。
    若不是你熊熊這樣問我還想不到哩！

  8. brianchin Says:
    一月 22nd, 2006 at 12:07 上午

    站大，我是第一次來，因為你的站名是”懶懶喵日記”，所以”敬稱”你為喵大 :D

    剛剛我又試了一遍，確實要把”c=null;”放在函式外才能正常運作。感謝站大不辭厭煩地給我提供答案 :D

  9. Beata Says:
    一月 22nd, 2006 at 2:41 上午

    喔！瞭解了^^*
    最近遊戲玩太多巴哈姆特跑太勤就變這樣了～
    　
    話說你來到了這兒另我許久未運作的大腦稍微靈活了一點點…
    這點我反而要感激你呢～

    歡迎有空再來玩！
    PS.順道有網站也貼一下讓我去串串門子呀！

  10. My Program Says:
    十月 27th, 2006 at 10:26 上午

    全域form變數的取得…

    在寫網頁全域 javascript 的部分, 由於 ie 可以很容易的解析全域型變數, 也造成有些網站在實作 client javascript 時, 會發生一些問題. 基本上在網頁上存取頁面元件時, 可以利用 DOM 的方式進行, 以…

  11. joyname Says:
    四月 10th, 2008 at 12:27 上午

    1-11-21-3
    2-12-22-3
    3-13-23-3
    4-14-24-3
    5-15-25-3

    var a = document.getElementById(‘table’).getElementsByTagName(‘tr’);
    var b = a[1].getElementsByTagName(‘td’);
    b[2].innerHTML = ‘我被改變了’;

    我是新手,看了之前的回應,也小試一下,但表格的內容還是沒變,是那裡錯,請高手幫忙一下,謝謝

  12. joyname Says:
    四月 10th, 2008 at 12:50 上午

    sum.innerHTML
    pch.value

    再問,innerHTML,value 這2個寫法有什麼不同,要如何分,為什麼不同的表示方式也可以做加減運算
    謝謝

Leave a Comment