如何在同一表格单元格中选择后添加标签？

问题描述：

我想在网页中显示一些下拉列表，所以我用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 
}

你确定没有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--它需要很多努力（尤其是查找/遍历元素）。

如何在同一表格单元格中选择后添加标签？

相关推荐