代码之家 › 专栏 › 技术社区 › FoxyBOA

Javascript只能访问内部表

dom html javascript

FoxyBOA · 技术社区 · 7 年前

我有一个生成嵌套表列表的系统。我既不能修改它,也不能向任何父表添加任何id/tags/classes。我也不能添加jQuery或任何其他JS库。

有人能帮我调整一下样品以适应我的情况吗?它获取的代码的问题 <td/>

var tds = document.getElementsByTagName( "td" );
    for( var i = 0; i < tds.length; i++ ) {
      tds[i].addEventListener("mouseover", function(){
          var children = this.parentNode.getElementsByTagName("td");
          for( var j = 0; j < children.length; j++ )
            children[j].style.backgroundColor = "green";
          });
      tds[i].addEventListener("mouseout", function(){
         var children = this.parentNode.getElementsByTagName("td");
            for( var j = 0; j < children.length; j++ )
                    children[j].style.backgroundColor = "initial";
            });
        }

   

<table>
    <tr>
    <td>
        <table>
            <tr>
                <td>cell1,1</td>
                <td>cell1,2</td>
                <td>cell1,3</td>
            </tr>
            <tr>
                <td>cell2,1</td>
                <td>cell2,2</td>
                <td>cell2,3</td>
            </tr>
        </table>
    </td>
    <td> test </td>
    </tr>
</table>

不幸的是,我在JS方面还不够好。

1 回复 | 直到 7 年前

j08691 7 年前

我放弃JavaScript,使用一个简单的CSS选择器

table table tr:hover {
  background: green;
}

<table>
  <tr>
    <td>
      <table>
        <tr>
          <td>cell1,1</td>
          <td>cell1,2</td>
          <td>cell1,3</td>
        </tr>
        <tr>
          <td>cell2,1</td>
          <td>cell2,2</td>
          <td>cell2,3</td>
        </tr>
      </table>
    </td>
    <td> test </td>
  </tr>
</table>

Ehtesham Z 7 年前

如果嵌套表的数目总是2,那么上面提到的答案是有效的。根据需求,您提到您通常有2-3个嵌套表,因此如果有3个或更多的嵌套表,它将无法工作。你必须改变你的CSS选择器。

使用下面的解决方案,总是将最内层表的行作为请求。

var tables = document.getElementsByTagName("table");
tables[tables.length - 1].classList.add("highlighter");

.highlighter tr:hover {
  background: green;
}

<table>
  <tr>
    <td>
      <table>
        <tr>
          <td>cell1,1</td>
          <td>cell1,2</td>
          <td>cell1,3</td>
        </tr>
        <tr>
          <td>cell2,1</td>
          <td>cell2,2</td>
          <td>cell2,3</td>
        </tr>
      </table>
    </td>
    <td> test </td>
  </tr>
</table>

推荐文章

Robo Robok · 为什么我无法使用Dom\HTMLDocument搜索标签?

1 年前

Y-jiji · 调整大小时替换了假选择

1 年前

LLScheme · 无法使用Playwright&Pyppeteer找到关键字

1 年前

Konrad Viltersten · 无法修改ViewContainerRef的内部内容,只能在Angular中添加标签

1 年前

Eric G · 如何将svg文本元素垂直居中?

2 年前

Nail Val · 当条件通过时,If语句不显示console.log,并按意外情况继续工作

2 年前

Juan Lanus · 如何获取对所选内容的DOM元素的引用

2 年前

huz3y · addEventListener不适用于从javascript添加的新类所选的元素

2 年前

Toby Hogan · 元素React状态更改后未在DOM中更新

2 年前

user23745914 · 能够访问javascript中的dom元素,而无需显式定义查询选择器

2 年前