我遇到了以下问题:
我在 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(坐标)方法中动态生成的表被附加在“xAxisList”下拉列表之前,我希望将此表作为一个整体附加在下拉列表(“xAxisList”)之后。
我在几个博客上花了很多时间,但找不到任何有用的东西。如果有人帮助我解决这个问题,我将非常感激。感谢您抽出时间阅读我的问题。
最佳答案
检查这个 JS FIDDLE v1.9.1 在 javascript 而不是 html 中使用 onchange。
(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);
关于java - 如何在选择同一 div 中存在的下拉列表时在 div 末尾附加动态生成的 HTML 表格?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29997227/