时间戳

首页 > 解决方案 > 有没有办法清除/隐藏两个 td 表中的第一个 td，而无需访问第一个 td？

html - 有没有办法清除/隐藏两个 td 表中的第一个 td，而无需访问第一个 td？

问题描述

有没有办法从两列表中的第二个 td 清除或隐藏第一个 td 的内容，而无需对实际 td 进行任何编辑访问？

所以我想隐藏下表中的数字

<table>
    <tr>
        <td>1.</td>
        <td>Content</td>
    </tr>
    <tr>
        <td>2.</td>
        <td>More content</td>
    </tr>
    <tr>
        <td>3.</td>
        <td>Even more content</td>
    </tr>
</table>

这是在供应商提供的应用程序中，该应用程序会输出编码页面。唯一的访问是在内容中添加代码的能力部分（每行中的第二个 td）中

我尝试使用具有某些绝对定位的 div 标签，然后用第二个 td 覆盖第一个 td，但我永远无法让它始终如一地工作。

标签： htmlhtml-tablehide

解决方案

使用 CSS 选择器

如果您的页面只有一个表格，您可以使用CSS 选择器。在您的情况下，您需要添加一种样式，该样式针对<td>没有先前<td>兄弟的标签。

td {
    /* hide the first td element */
    display: none;
}

td + td {
    /* display all td elements that have a previous td sibling */
    display: block;
}

如果您只能在每行的第二行中添加内容，<td>那么在标签中将上述代码的空白剥离版本添加style到第一行可能会起作用，但如果您的页面上有多个表格，则可能会产生混乱的副作用.

<table>
    <tr>
        <td>1.</td>
        <td><style>td{display:none;}td+td{display:block;}</style>Content</td>
    </tr>
    <tr>
        <td>2.</td>
        <td>More content</td>
    </tr>
    <tr>
        <td>3.</td>
        <td>Even more content</td>
    </tr>
</table>

使用 JavaScript

如果您的页面上有多个表格，请尝试<div>在第一个内容中插入一个具有唯一 ID的空表格<td>。立即放置一个以该 ID 的最近父级为目标的脚本，<table>您可以从中提取必要<td>的 s 来隐藏。此外，您需要确保仅在加载页面后才运行代码，否则它可能不会tr在脚本实施的位置之外拾取任何 s 等。

查找最近父级的最简单方法<table>是使用closest，但 Internet Explorer 不支持此方法。这篇文章有一个很好的解决方案（仅限父母），我将使用它。

完整的脚本：

window.onload = function() {
    function getClosest( el, tag ) {
        tag = tag.toUpperCase();
        do {
            if ( el.nodeName === tag ) {
                return el;
            }
        } while ( el = el.parentNode );
        return null;
    }
    var table = getClosest( document.getElementById( 'unique-id' ), 'table' );
    var trs = table.getElementsByTagName( 'tr' );
    for ( var i = 0; i < trs.length; i++ ) {
        trs[ i ].getElementsByTagName( 'td' )[ 0 ].style.display = 'none';
    }
}

包括<div>具有唯一 ID、去除空格和添加<script>标签的表格，您的表格将如下所示：

<table>
    <tr>
        <td>1.</td>
        <td><div id="unique-id"></div><script>window.onload=function(){function getClosest(el,tag){tag=tag.toUpperCase();do{if(el.nodeName===tag){return el;}}while(el=el.parentNode);return null;}var table=getClosest(document.getElementById('unique-id'),'table'),trs = table.getElementsByTagName('tr');for(var i=0;i<trs.length;i++){trs[ i ].getElementsByTagName('td')[0].style.display='none';}}</script>Content</td>
    </tr>
    <tr>
        <td>2.</td>
        <td>More content</td>
    </tr>
    <tr>
        <td>3.</td>
        <td>Even more content</td>
    </tr>
</table>

推荐阅读