在选择出现在同一div中的下拉菜单时,如何在div的末尾附加动态生成的HTML表?

阿米尔

我陷入以下问题:

我在html中有这个div:

<div id="PieChart">
    <label>Title of the pie chart:</label>
    <input id="pieChartTitle" type="text">
    <select id="xAxisList" onChange="showAxis('x')">
        <option hidden="true"></option>                         
        <option value="time">Time</option>
    </select>
</div>

下拉列表的OnChange我正在调用Javascript函数showAxis('x'),该函数动态生成HTML表。代码如下:

function showAxis(coordinate){
    var axisList = coordinate + "AxisList";
    var v = document.getElementById(axisList);
    selectedAxisType = v.options[v.selectedIndex].value;

    var dataArray = new Array();
    selectedChartType = "PieChart";    
    var selectedChart = document.getElementById(selectedChartType);

    var tr, td;
    var table, tableBody;
    var dropdown, opt, i;

    table = document.createElement('TABLE');

    dataArray = ["Years", "Seasons", "Months", "Weeks", "Days"];

    table.setAttribute("id", "time"+axisList+"Table");
    table.setAttribute("class", "time"+axisList+"Table");
    table.width='100%';

    tableBody = document.createElement('TBODY');
    table.appendChild(tableBody);

    dropdown = document.createElement("select");
    dropdown.setAttribute("id", "time"+axisList);
    tr = document.createElement('TR');
    tableBody.appendChild(tr);

    td = document.createElement('TD');
    td.width='40%';
    td.appendChild(document.createTextNode("Time selection on the basis of:"));
    tr.appendChild(td);

    opt = document.createElement("option");
    opt.hidden="true";
    dropdown.options.add(opt);

    for (i=0; i<dataArray.length; i++){
        td = document.createElement('TD');
        opt = document.createElement("option");
        opt.text = dataArray[i];
        opt.value = dataArray[i];
        dropdown.options.add(opt);
        td.appendChild(dropdown);

        tr.appendChild(td);
    }// END of Outer for loop
selectedChart.appendChild(table);
}// END of showAxis()

问题:showAxis(coordinate)方法中此动态生成的表被附加在“ xAxisList”下拉列表之前,我希望将此表作为一个整体附加在下拉列表之后(“ xAxisList”)。

我花了很多时间在一些博客上,但是找不到任何有用的东西。如果有人帮助我解决这个问题,我将非常感谢。感谢分配给您的时间和阅读我的问题。

科技狂热者

选中此JS FIDDLE v1.9.1,在JavaScript中使用onchange而不是html。

JSFIDDLE v1

(function($){

$(function(){  //document.ready


    $("#xAxisList").on('change', function() {
       showAxis('x'); 
    });

function showAxis(coordinate){
var axisList = coordinate + "AxisList";
var v = document.getElementById(axisList);
selectedAxisType = v.options[v.selectedIndex].value;

var dataArray = new Array();
selectedChartType = "PieChart";    
var selectedChart = document.getElementById(selectedChartType);

var tr, td;
var table, tableBody;
var dropdown, opt, i;

table = document.createElement('TABLE');

dataArray = ["Years", "Seasons", "Months", "Weeks", "Days"];

table.setAttribute("id", "time"+axisList+"Table");
table.setAttribute("class", "time"+axisList+"Table");
table.width='100%';

tableBody = document.createElement('TBODY');
table.appendChild(tableBody);

dropdown = document.createElement("select");
dropdown.setAttribute("id", "time"+axisList);
tr = document.createElement('TR');
tableBody.appendChild(tr);

td = document.createElement('TD');
td.width='40%';
td.appendChild(document.createTextNode("Time selection on the basis of:"));
tr.appendChild(td);

opt = document.createElement("option");
opt.hidden="true";
dropdown.options.add(opt);

for (i=0; i<dataArray.length; i++){
    td = document.createElement('TD');
    opt = document.createElement("option");
    opt.text = dataArray[i];
    opt.value = dataArray[i];
    dropdown.options.add(opt);
    td.appendChild(dropdown);

    tr.appendChild(td);
}// END of Outer for loop
selectedChart.appendChild(table);
}// END of showAxis

      });

})(jQuery);   

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何选择在同一div中存在的下拉列表中,在div的末尾附加动态生成的HTML表?

来自分类Dev

Bootstrap下拉菜单出现在其他DIV的后面

来自分类Dev

选择下拉菜单时如何更改div背景颜色?

来自分类Dev

如何编码svg图层,使其出现在Inkscape图层下拉菜单中?

来自分类Dev

如何在同一选项/下拉菜单中的选择中扩展选项

来自分类Dev

如何在同一选项/下拉菜单中的选择中扩展选项

来自分类Dev

如何基于从html页面中的下拉菜单中选择一个选项来定位div

来自分类Dev

悬停后,css下拉菜单::子菜单出现在主菜单中

来自分类Dev

下拉菜单出现在父菜单的下方

来自分类Dev

下拉菜单出现在父菜单的下方

来自分类Dev

当使用display:table时,下拉菜单出现在菜单顶部

来自分类Dev

一个下拉菜单中的选定值不应出现在Angular材质的其他两个下拉菜单中

来自分类Dev

如何在一页中为单独的div元素显示类似的下拉菜单?

来自分类Dev

如何使html中的下拉菜单与另一个div重叠

来自分类Dev

选择从选择下拉菜单中的选项时出现的模态

来自分类Dev

为什么我的下拉菜单没有出现在悬停时?

来自分类Dev

下拉菜单未出现在特定按钮下方

来自分类Dev

Bootstrap下拉菜单出现在页面底部

来自分类Dev

动态下拉菜单在Div中显示动态内容

来自分类Dev

如何清除使用Beautifulsoup和Selenium依次选择下拉菜单时动态生成的数据?

来自分类Dev

如何使下拉菜单恰好出现在Material-UI的栏下方?

来自分类Dev

如何使特定选项出现在选择菜单中?

来自分类Dev

Excel UDF没有出现在下拉菜单中

来自分类Dev

WordPress中的twitter bootstrap下拉菜单出现在revslider的后面

来自分类Dev

我想避免文件扩展名出现在Rshiny的下拉菜单中。

来自分类Dev

CMFCColorButton没有出现在MFC类向导下拉菜单中

来自分类Dev

DIV 中的下拉菜单

来自分类Dev

选择下拉菜单时更改div值

来自分类Dev

如何使不同的div出现在同一位置?

Related 相关文章

  1. 1

    如何选择在同一div中存在的下拉列表中,在div的末尾附加动态生成的HTML表?

  2. 2

    Bootstrap下拉菜单出现在其他DIV的后面

  3. 3

    选择下拉菜单时如何更改div背景颜色?

  4. 4

    如何编码svg图层,使其出现在Inkscape图层下拉菜单中?

  5. 5

    如何在同一选项/下拉菜单中的选择中扩展选项

  6. 6

    如何在同一选项/下拉菜单中的选择中扩展选项

  7. 7

    如何基于从html页面中的下拉菜单中选择一个选项来定位div

  8. 8

    悬停后,css下拉菜单::子菜单出现在主菜单中

  9. 9

    下拉菜单出现在父菜单的下方

  10. 10

    下拉菜单出现在父菜单的下方

  11. 11

    当使用display:table时,下拉菜单出现在菜单顶部

  12. 12

    一个下拉菜单中的选定值不应出现在Angular材质的其他两个下拉菜单中

  13. 13

    如何在一页中为单独的div元素显示类似的下拉菜单?

  14. 14

    如何使html中的下拉菜单与另一个div重叠

  15. 15

    选择从选择下拉菜单中的选项时出现的模态

  16. 16

    为什么我的下拉菜单没有出现在悬停时?

  17. 17

    下拉菜单未出现在特定按钮下方

  18. 18

    Bootstrap下拉菜单出现在页面底部

  19. 19

    动态下拉菜单在Div中显示动态内容

  20. 20

    如何清除使用Beautifulsoup和Selenium依次选择下拉菜单时动态生成的数据?

  21. 21

    如何使下拉菜单恰好出现在Material-UI的栏下方?

  22. 22

    如何使特定选项出现在选择菜单中?

  23. 23

    Excel UDF没有出现在下拉菜单中

  24. 24

    WordPress中的twitter bootstrap下拉菜单出现在revslider的后面

  25. 25

    我想避免文件扩展名出现在Rshiny的下拉菜单中。

  26. 26

    CMFCColorButton没有出现在MFC类向导下拉菜单中

  27. 27

    DIV 中的下拉菜单

  28. 28

    选择下拉菜单时更改div值

  29. 29

    如何使不同的div出现在同一位置?

热门标签

归档