Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/443.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 如何在同一表格单元格中的select之后添加标签?_Javascript_Html_Dom - Fatal编程技术网

Javascript 如何在同一表格单元格中的select之后添加标签?

Javascript 如何在同一表格单元格中的select之后添加标签?,javascript,html,dom,Javascript,Html,Dom,我想在网页上显示一些下拉列表,所以我用document.createElement方法创建了表、表体、行和单元格;然后我创建select元素,并使用appendChild方法将它们添加到单元格中。该网页可以显示下拉列表 然后我想添加一句话给用户一个提示,比如这个下拉列表是针对xxxx的,你可以用它来提示xxx。我决定用标签来做这件事。所以我创建了一个标签。但我不想将标签添加到下拉列表后面的单独单元格中。我想在下拉列表之后添加标签。因此,我再次使用appendChild添加标签,并在同一单元格中进

我想在网页上显示一些下拉列表,所以我用document.createElement方法创建了表、表体、行和单元格;然后我创建select元素,并使用appendChild方法将它们添加到单元格中。该网页可以显示下拉列表

然后我想添加一句话给用户一个提示,比如这个下拉列表是针对xxxx的,你可以用它来提示xxx。我决定用标签来做这件事。所以我创建了一个标签。但我不想将标签添加到下拉列表后面的单独单元格中。我想在下拉列表之后添加标签。因此,我再次使用appendChild添加标签,并在同一单元格中进行选择-首先追加选择,然后追加标签。但标签显示在网页中的选择之前

然后,我尝试将标签作为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);
    }
}

如果您能够在代码中发布一个示例,这样我们就可以看到您的问题,这将非常有用。JavaScript运行后,您是否能够查看页面的源代码?Chrome能够做到这一点——只是为了确保元素的顺序正确

我已经根据我认为您正在尝试做的事情制作了一个JSFIDLE,它似乎按照正确的顺序选择,然后添加标签。您是否有任何CSS样式或任何导致元素顺序发生变化的东西

将标签作为子节点附加到select将不起作用,因为它只能将选项元素作为其子节点

老实说,我会先看看你在做什么。如果可以不使用JavaScript生成HTML,那么我建议这样做。如果您只需要根据用户正在做的事情显示某些元素,那么最好拥有所有内容并显示/隐藏必要的位。或者,如果您可以从外部源加载HTML并附加到您需要的位置,那就更好了

JavaScript中的DOM操作非常昂贵,有时最好创建您必须和需要的内容


如果您必须执行DOM操作,我建议您看看-这需要大量的工作,特别是查找/遍历元素。

谢谢您,Jonathon。我发布代码删除一些不相关的代码和FireBug查看的生成的HTMLView。看起来html是正常的。但在网页中,标签显示在选择之前。我来看看jQuery。起初,我认为这是一项相当简单的任务,不需要学习jQuery。现在我知道也许jQuery更省时。再次感谢你,乔纳森。你确定没有CSS影响选择和标签的位置吗?HTML代码片段本身应该将标签放在select.Hi Frode之后,您是对的。我检查了我的CSS文件,标签上有一个float:left。我抄袭了这个风格,但不知道它的意思。现在我知道了。谢谢您。:
<td>
    <select is="GuestID">
       <option>xxxxx</option>
       .....
    </select>
    <label id="GuestID_Label2" for="GuestID">test1</label>
</td>
label {
    font-weight: bold; text-align: right; width: 100px; display: block; float: left; clear: left; margin-right: 3px; cursor: pointer 
}