如何在同一表格單元格中選擇後添加標籤？

我想在網頁中顯示一些下拉列表，所以我用document.createElement（）方法創建了table，table body，row和cell;然後創建select元素並使用appendChild（）方法將它們添加到單元格中。該網頁可以顯示下拉列表。如何在同一表格單元格中選擇後添加標籤？

然後我想添加一個句子給用戶一個提示，比如「這個下拉列表是xxxx，你可以用它來xxx」。我決定用標籤來做。所以我創建了一個標籤。但我不想將標籤添加到下拉列表後的單獨單元格中。我想在下拉列表後面添加標籤。所以我再次使用appendChild（）來添加標籤並在同一個單元格中選擇 - 首先追加select，然後追加標籤。但標籤顯示在網頁中的選擇之前。

然後我試圖將標籤附加到select作爲select的子節點。然後標籤消失。僅顯示選擇。

我是一個HTML/Javascript/DOM的新手。也許我的想法從一開始就是錯誤的。有沒有人可以給我一種方法來實現我的要求？我只是想在一個下拉列表後添加一個句子。

在此先感謝。

============================================== ========

if (request.readyState == 4 && request.status == 200) { 
    maindiv = document.getElementById("maintable"); 
    optiondiv = getDivRef("optiondiv"); 

    //create a table to hold the options. 
    mytable  = document.createElement("table"); 
    mytablebody = document.createElement("tbody"); 


    option_array = splitOptions(request.responseText.replace(/[\r\n]/g, ""), ';'); 
    for (xindex = 0; xindex < option_array.length; xindex++) { 

     _select = createSelect(_tmp_option_pair[0]); 


     mycurrent_row = document.createElement("tr"); 

     mycurrent_cel2 = document.createElement("td"); // for drop list 
     mycurrent_cel3 = document.createElement("td"); // for hint 


     try { 
      for (yindex = 0; yindex < _tmp_option_list.length; yindex++) { 
       _select.add(new Option(_tmp_option_list[yindex], yindex), null); 
      } 

     }catch (ex) { 
      for (yindex = 0; yindex < _tmp_option_list.length; yindex++) { 
       _select.add(new Option(_tmp_option_list[yindex], yindex)); 
      } 
     } 

     _label2 = createLabel(_tmp_option_pair[0] + "_Label2"); 
     _label2.setAttribute("for", _select.id); 
     _label2.innerText = "test1"; 


     //add obj to dom tree    
     mycurrent_cel2.appendChild(_select); 
     mycurrent_cel2.appendChild(_label2); 

     mycurrent_row.appendChild(mycurrent_cel2); 
     mycurrent_row.appendChild(mycurrent_cel3); 
     mytablebody.appendChild(mycurrent_row); 
    } 
}

生成的HTML代碼是

<td> 
    <select is="GuestID"> 
     <option>xxxxx</option> 
     ..... 
    </select> 
    <label id="GuestID_Label2" for="GuestID">test1</label> 
</td>

的CSS代碼

label { 
    font-weight: bold; text-align: right; width: 100px; display: block; float: left; clear: left; margin-right: 3px; cursor: pointer 
}

來源

2010-12-07 Landy

你確定沒有CSS影響選擇和標籤的位置嗎？該HTML片段本身應該在選擇之後放置標籤。 – Frode 2010-12-07 12:24:23

嗨弗羅德，你說得對。我檢查了我的CSS文件，標籤有一個「float：left」。我複製了風格但不知道意義。現在我明白了。謝謝。:) – Landy 2010-12-07 13:33:15

如果你能發佈一個例子，這將是有益的你的代碼，所以我們可以看到你的問題。在JavaScript運行之後，您能夠查看頁面的源代碼嗎？（Chrome能夠做到這一點） - 只是爲了確保元素在那裏的順序是正確的？

我已經做了一個jsFiddle從我認爲你想要做的事情，它似乎是在正確的順序（選擇，然後標籤）。你有任何CSS樣式或任何導致元素順序改變的東西嗎？

http://jsfiddle.net/nauFw/

追加標籤作爲子節點的select將無法正常工作，因爲它只能有option元素作爲其子。

說實話，我會先看看你在做什麼。如果可能不使用JavaScript生成HTML，那麼我會推薦這麼做。如果您只需根據用戶的行爲顯示某些元素，則最好擁有所有內容並顯示/隱藏必要的位。或者，如果您可以從外部源加載HTML並追加到需要的地方，那會更好。

JavaScript中的DOM操作相當昂貴，有時最好創建你所需要的和make one append。

如果你不得不做DOM操作，我建議你看看jQuery library--它需要很多努力（尤其是查找/遍歷元素）。

來源

2010-12-07 11:29:25

如何在同一表格單元格中選擇後添加標籤？

回答

相關問題