javascript - 在 javascript 中使用 getElementByid* 更改图像的 src

Question

我有一个标题表来对另一个内容表进行排序。

<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 图像:

<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>

当我在 Chrome 中调试时，foto = col.getElementsByName("sortIcon"); 抛出此错误:未捕获的类型错误:无法读取未定义的属性“getElementsByName”。

我需要更改 td 元素的 img 元素，但无法获取该元素。

Answer 1

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";
}

并将 n 作为参数传递到 sortTable 函数中。

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