別のコンテンツテーブルを並べ替えるためのヘッダーテーブルがあります。一方でjavascriptでgetElementBy *を使用してimgのsrcを変更します
<table id="tableHeader">
<tr>
<td class="TituloPestana">Col0</td>
<td class="TituloPestana">Col1</td>
<td class="TituloPestana" onclick="sortTable(2)">Col2
<img name="sortIcon" width="48" height="48" src="images/pic.jpg"></td>
<td class="TituloPestana" onclick="sortTable(3)">Col3
<img name="sortIcon" width="48" height="48" src="images/pic.jpg"></td>
<td class="TituloPestana" onclick="sortTable(4)">Col4
<img name="sortIcon" width="48" height="48" src="images/pic.jpg"></td>
<td class="TituloPestana" onclick="sortTable(5)">Col5
<img name="sortIcon" width="48" height="48" src="images/pic.jpg"></td>
<td width="50px" class="TituloPestana"></td>
</tr>
</table>
<div id="contentDiv" style="max-height: 150px; overflow-y: scroll;">
<table id="tableContent">
<thead>
(...)
</thead>
<tbody id="bodyPass"></tbody>
</table>
</div>
、JS関数はtableContentをソートしsortIcon画像を変更するには:私はChromeでデバッグする場合
<script>
function sortTable(n) {
resertIcons();
var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
table = document.getElementById("tableContent");
switching = true;
dir = "asc";
while (switching) {
switching = false;
rows = table.getElementsByTagName("TR");
for (i = 0; i < (rows.length - 1); i++) {
shouldSwitch = false;
x = rows[i].getElementsByTagName("TD")[n];
y = rows[i + 1].getElementsByTagName("TD")[n];
if(n != 5){
if (dir == "asc") {
if (x.innerHTML.toLowerCase() > y.innerHTML
.toLowerCase()) {
shouldSwitch = true;
break;
}
} else if (dir == "desc") {
if (x.innerHTML.toLowerCase() < y.innerHTML
.toLowerCase()) {
shouldSwitch = true;
break;
}
}
}else{
var dateA = new Date(x.innerHTML);
var dateB = new Date(y.innerHTML);
if (dir == "asc") {
if (dateA > dateB) {
shouldSwitch = true;
break;
}
} else if (dir == "desc") {
if (dateA < dateB) {
shouldSwitch = true;
break;
}
}
}
}
if (shouldSwitch) {
rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
switching = true;
switchcount++;
} else {
if (switchcount == 0 && dir == "asc") {
dir = "desc";
switching = true;
}
}
}
changeIcon(dir,n);
}
function resertIcons(){
document.getElementsByName("sortIcon").src="images/pic.jpg";
}
function changeIcon(ord,n){
table = document.getElementById("tableHeader");
row = table.getElementsByTagName("tr")[0];
col = row.getElementsByTagName("td")[n];
foto = col.getElementsByName("sortIcon");
if(ord == "asc")
foto.src="images/orderAsc.jpg";
else
foto.src="images/orderDesc.jpg";
}
</script>
、このfoto = col.getElementsByName("sortIcon");
は、このエラーがスローされます。キャッチされない例外TypeErrorを:プロパティを読み取ることができません。 'getElementsByName'は未定義です。
要素img
をtd
要素の要素に変更する必要がありますが、要素を取得できません。
おそらくあなたは に_col_ nullを取得しています。_col = row.getElementsByTagName( "td")[n]; _私たちが手助けできるようにするために、フィドルを作成します。 – Harshal
ほとんどの場合、2番目のパラメータなしで 'changeIcon(ord、n)'を呼び出します。したがって、 'col = row.getElementsByTagName(" td ")[未定義];'は常に 'undefined'になり、' col.getElementsByName( "sortIcon"); 'は失敗します。この場合はチェックしてください。 – Bellian
このような場合は、まず自分でデバッグしてください。document.getElementsByName( "sortIcon")をログに記録していれば、要素の配列を返します。 – zennith