다음 문제에 갇혀 있습니다.
이 div가 html로 있습니다.
<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 HTML 테이블을 동적으로 생성하는 Javascript 함수 인 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()
문제 : showAxis (coordinate) 메서드에서 동적으로 생성 된 테이블이 "xAxisList"드롭 다운 목록 앞에 추가됩니다.이 테이블 전체가 드롭 다운 목록 ( "xAxisList") 뒤에 추가되기를 원합니다.
나는 몇 개의 블로그에서 많은 시간을 보냈지 만 도움이되는 것을 찾을 수 없었다. 누군가가이 문제를 해결하도록 도와 주면 정말 고맙습니다. 시간을내어 내 질문을 읽어 주셔서 감사합니다.
이 JS FIDDLE v1.9.1이 html 대신 javascript에서 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);
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다