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

Question

有什么方法可以清除或隐藏第一个 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>

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

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

Answer 1

使用 CSS 选择器

如果您的页面只有一个表格，您可以使用 CSS selectors .在您的情况下，您需要添加一个以 <td> 为目标的样式之前没有 <td> 的标签 sibling 。

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>的内容。在放置一个以最近的 <table> 为目标的脚本之后该 ID 的父级，您可以从中提取必要的 <td>是为了隐藏。此外，您需要确保仅在页面加载后运行代码，否则它可能不会获取任何 tr。 s 等超出脚本实现的地方。

找到最近父级的最简单方法是 <table>是通过使用 closest但这在 Internet Explorer 中不受支持。 This帖子有一个很好的解决方案(仅限父级)，我将使用。

完整的脚本:

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>