Java 如何在选择同一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>

饼图的标题：
时间

更改下拉列表后，我将调用一个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()

功能显示轴（坐标）{
var axisList=坐标+“axisList”；
var v=document.getElementById（axisList）；
SelectedMaxType=v.options[v.selectedIndex]。值；
var dataArray=新数组（）；
selectedChartType=“PieChart”；
var selectedChart=document.getElementById（selectedChartType）；
var-tr，td；
var表、表体；
var下拉列表，opt，i；
table=document.createElement（'table'）；
dataArray=[“年”、“季”、“月”、“周”、“日”]；
table.setAttribute（“id”、“time”+axisList+“table”）；
setAttribute（“类”、“时间”+axisList+“表”）；
表1.width='100%'；
tableBody=document.createElement（'TBODY'）；
table.appendChild（表体）；
dropdown=document.createElement（“选择”）；
setAttribute（“id”、“时间”+axisList）；
tr=document.createElement（'tr'）；
tableBody.appendChild（tr）；
td=document.createElement（'td'）；
td.width='40%'；
td.appendChild（document.createTextNode（“基于：”）的时间选择）；
tr.appendChild（td）；
opt=document.createElement（“选项”）；
opt.hidden=“true”；
下拉菜单.options.add（opt）；
对于（i=0；i检查JS FIDDLE v1.9.1在javascript而不是html中使用onchange


（函数（$）{
$（函数（）{//document.ready
$（“#xAxisList”）.on（'change'，function（）{
showAxis（'x'）；
});
功能显示轴（坐标）{
var axisList=坐标+“axisList”；
var v=document.getElementById（axisList）；
SelectedMaxType=v.options[v.selectedIndex]。值；
var dataArray=新数组（）；
selectedChartType=“PieChart”；
var selectedChart=document.getElementById（selectedChartType）；
var-tr，td；
var表、表体；
var下拉列表，opt，i；
table=document.createElement（'table'）；
dataArray=[“年”、“季”、“月”、“周”、“日”]；
table.setAttribute（“id”、“time”+axisList+“table”）；
setAttribute（“类”、“时间”+axisList+“表”）；
表1.width='100%'；
tableBody=document.createElement（'TBODY'）；
table.appendChild（表体）；
dropdown=document.createElement（“选择”）；
setAttribute（“id”、“时间”+axisList）；
tr=document.createElement（'tr'）；
tableBody.appendChild（tr）；
td=document.createElement（'td'）；
td.width='40%'；
td.appendChild（document.createTextNode（“基于：”）的时间选择）；
tr.appendChild（td）；
opt=document.createElement（“选项”）；
opt.hidden=“true”；
下拉菜单.options.add（opt）；
对于（i=0；i）您的下拉列表是表格的一行，添加在末尾，因此它将始终位于“下方”表。它实际上在您的表中。您需要从表中拉出下拉列表。不，我不关心在表中动态生成的下拉列表。我的问题是，此动态表作为一个整体附加在“xAxisList”（下拉列表）之上，它调用showAxis（坐标）更改！哦，当他们选择下拉列表时，它会显示表格，然后他们刚才使用的下拉列表现在就在下面？你是这么说的吗？没错，表格会附加在“xAxisList”（下拉列表）上面，但我希望它被追加到末尾！您使用的是什么版本的jquery。它在2.0.2中工作。这不是问题所在。我的问题是这个动态表作为一个整体被追加到“xAxisList”（下拉列表）的上方，该列表在更改时调用showAxis（坐标）！我希望这个表被追加到“xAxisList”（下拉列表）的下方！@Amir答案已更新。我相信这应该可以。检查JS Fiddle链接，我从html中删除了onchange并将其放入javascript/jquery。感谢您的时间伙伴。：）没问题。很高兴提供帮助。：）
(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);