有没有办法 clear/hide 两个 td table 中的第一个 td，而不访问第一个 td？

Question

是否有任何方法可以清除或隐藏第一个 td 的内容，从双列中的第二个 td table，而无需对实际 td 的任何编辑权限？

所以我想隐藏下面table中的数字

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

这是在吐出编码页的供应商提供的应用程序中。唯一的访问权限是能够在 Content 部分（每行中的第二个 td）中添加代码。

我试过使用带有绝对定位的 div 标签，只用第二个覆盖第一个 td，但我永远无法让它始终如一地工作。

Answer 1

有 CSS 个选择器

如果您的页面只有一个 table，您可以使用 CSS selectors。在您的情况下，您需要添加一种样式，该样式针对没有先前 <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，可能会产生混乱的副作用。

<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

如果您的页面上有多个 table，请尝试在第一个 <td> 的内容中插入一个具有唯一 ID 的空 <div>。紧接着放置一个脚本，该脚本以最接近该 ID 的 <table> parent 为目标，您可以从中提取必要的 <td> 以进行隐藏。此外，您需要确保在页面加载后只运行代码，否则它可能不会在脚本实现之外获取任何 trs 等。

找到最近的 parent 即 <table> 的最简单方法是使用 closest，但这在 Internet Explorer 中不受支持。 This post 有一个很好的解决方案（仅 parent）我会使用。

完整脚本：

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

包括具有唯一 ID 的 <div>，去除空格并添加 <script> 标签，您的 table 看起来像：

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

有没有办法 clear/hide 两个 td table 中的第一个 td，而不访问第一个 td？

Is there any way to clear/hide the first td in a two td table, without access to the first td?

html

html-table

hide

有 CSS 个选择器

和JavaScript