2017-08-01 18 views
0

別のコンテンツテーブルを並べ替えるためのヘッダーテーブルがあります。一方で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'は未定義です。

要素imgtd要素の要素に変更する必要がありますが、要素を取得できません。

+1

おそらくあなたは に_col_ nullを取得しています。_col = row.getElementsByTagName( "td")[n]; _私たちが手助けできるようにするために、フィドルを作成します。 – Harshal

+1

ほとんどの場合、2番目のパラメータなしで 'changeIcon(ord、n)'を呼び出します。したがって、 'col = row.getElementsByTagName(" td ")[未定義];'は常に 'undefined'になり、' col.getElementsByName( "sortIcon"); 'は失敗します。この場合はチェックしてください。 – Bellian

+1

このような場合は、まず自分でデバッグしてください。document.getElementsByName( "sortIcon")をログに記録していれば、要素の配列を返します。 – zennith

答えて

2

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").forEach(function (item) {  item.src="https://www.google.ru/images/branding/googleg/1x/googleg_standard_color_128dp.png"; 
 
    }) 
 
} 
 
function changeIcon(ord,n){ 
 
    table = document.getElementById("tableHeader"); 
 
    row = table.getElementsByTagName("tr")[0]; 
 
    col = row.getElementsByTagName("td")[n]; 
 
    foto = col.firstElementChild; 
 
    if(ord == "asc") 
 
     foto.src="http://www.nannygoatsinpanties.com/wp-content/uploads/2012/06/128x128-facebook.png"; 
 
    else 
 
     foto.src="http://iconshow.me/media/images/social/flat-gradient-social-media-icons/png/128/Twitter.png"; 
 
}
<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="https://www.google.ru/images/branding/googleg/1x/googleg_standard_color_128dp.png"></td> 
 
     <td class="TituloPestana" onclick="sortTable(3)">Col3 
 
       <img name="sortIcon" width="48" height="48" src="https://www.google.ru/images/branding/googleg/1x/googleg_standard_color_128dp.png"></td> 
 
     <td class="TituloPestana" onclick="sortTable(4)">Col4 
 
       <img name="sortIcon" width="48" height="48" src="https://www.google.ru/images/branding/googleg/1x/googleg_standard_color_128dp.png"></td> 
 
     <td class="TituloPestana" onclick="sortTable(5)">Col5 
 
       <img name="sortIcon" width="48" height="48" src="https://www.google.ru/images/branding/googleg/1x/googleg_standard_color_128dp.png"></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>

document.getElementsByName("sortIcon")項目の配列のようなHTMLのコレクションを返します。だからあなたのコードでは、すべてのコレクションのソースを変更しようとしているのではなく、格納されている画像を変更しようとしています。ソースを変更するにはdocument.getElementsByName("sortIcon")[n]ここで、nはターゲットイメージのインデックスです

私はこのような関数resertIconsを書き直すことをお勧めします。

function resertIcons(n){ 
    document.getElementsByName("sortIcon")[n].src="images/pic.jpg"; 
} 

そして、sortTable関数の引数としてnを渡します。

function sortTable(n) { 
    resertIcons(n); 
... 
+2

要素の配列を返しません。それは['HTMLCollection'](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection)を返します。 – Marty

+0

True ... – blewherself

+0

メソッドresertIcons()が正しく動作します。 –

0

ご覧のとおり、getElementsByNameは、ドキュメントオブジェクトのプロパティです。ドキュメントで示唆されているように、idやクラスに依存し、document.getElementById()またはcol.getElementsByClassNameを使用する方が良いでしょう。

0
document.getElementsByName("sortIcon").src="images/pic.jpg"; 

これは、あなたの要素の配列を返します。 forループを使用して、その配列の要素をループします。

var array = document.getElementsByName("sortIcon"); 

for (var i = array.length; i--;) { 
    array[i].src = "new source"; 
} 

更新:getElementsByNameでは、多くの要素が返すことができると言うだろう。これは配列として表されます。

ヒント:コードをデバッグする場合は、次の行を使用できます。

console.log(documents.getElementsByName("name")); 

コンソールのウィンドウに、アレイが記録されていることがわかります。

1

getElementsByName()は、documentのメンバーです。 代わりにfoto = col.querySelectorAll('[name=sortIcon]');を使用できます。
古いブラウザではこれをサポートしていない場合があります。

関連する問題