如何使用JavaScript找到带有img标签的单元格

How to find cells with img tag using JavaScript?

本文关键字：img 标签 单元格 何使用 JavaScript      更新时间：2023-09-26

我正在寻找一种方法，从表中选择单元格仅使用img标签，并仅使用JS更改样式。

<table border="1" id="table1">
<tr>
<td id="0"><img src="background.jpg"></td><td id="1"></td><td id="2"></td><td id="3"></td>
</tr>
</table>

我想在我的表单中使用它，但我不知道如何使它工作。我试过这个(在它我想看img的id输入的形式，但我知道-它不工作)

 function form1() {
    var x = document.getElementsByTagName("img");  
    var y = document.getElementById('formu').value;
 if (x=y) {
    console.log(x)
}


<form>
    <fieldset>
        <label for="ship"></label>
        <input type="text" id="formu" name="ship" value="" />
    </fieldset>
    <input type="button" onclick="check()" value="fire!">
</form>

如果在这个表单中，我将添加id cell where exists标签img我想要更改样式的单元格

在javascript中你可以这样选择图片:

var tdImages = document.querySelectorAll('td > img');

然后遍历它们并使用parentNode

var td, index = 0, length = tdImages.length;
for ( ; index < length; index++) {
    td = tdImages[index].parentNode;
}

这里是一个小提琴的例子:http://jsfiddle.net/y1vseo5t/

编辑:所以你想让用户在输入中输入一个ID，并从中确定表数据元素是否有一个图像，如果它改变了一些样式。

http://jsfiddle.net/y1vseo5t/1/

选择器不能以数字开头，所以我将表数据元素上的id更改为td0, td1…

如果你必须坚持使用数字作为ID的第一个字符，这里有另一个解决方案:http://jsfiddle.net/y1vseo5t/2/

这最好在jQuery中完成，您可以使用has选择器

$("td").has("img").each(function() {
});

这是JavaScript解决方案

var cellsWithImage = document.querySelectorAll("td > img");
for (var i = 0; i < cellsWithImage.length; i++) {
    cellsWithImage[i] = cellsWithImage[i].parentNode;
}

注意，我们必须使用循环，因为数组方法filter和map不能在DOM集合上工作。

关于你的代码，我有另一个注意事项。您正在使用document.getElementsByTagName函数，但它返回一个集合而不是DOM对象。您需要将对象的索引放在括号内以引用特定的图像。

document.getElementsByTagName("img")[0]       // Returns first image
相关文章：