在javascript中使用getElementBy *更改img的src

时间：2017-08-01 07:08:17

标签： javascript html

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

<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");会抛出此错误：未捕获的TypeError：无法读取未定义的属性“getElementsByName”。

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

4 个答案:

答案 0 :(得分：2)

＆＃13;
＆＃13; 
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";
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

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);
...

答案 1 :(得分：1)

getElementsByName()是document的成员。 您可以改用foto = col.querySelectorAll('[name=sortIcon]'); 也许一些较旧的浏览器不支持此功能。

答案 2 :(得分：0)

正如您在此处所看到的，getElementsByName仅是文档对象的属性。正如文档中所建议的，最好依赖id和类并使用document.getElementById（）或col.getElementsByClassName。

答案 3 :(得分：0)

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

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

这会返回一个元素数组。使用for循环遍历该数组的元素。 

getElementsByName

更新： console.log(documents.getElementsByName("name")); 中的 s 会说有很多元素可以返回。这表示为一个数组。

提示：如果要调试代码，可以使用下一行。 

{{1}}

然后您可以在控制台窗口中看到记录了一个阵列。

相关问题
最新问题