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>兄弟姐妹。

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>来隐藏。另外，您需要确保仅在页面加载后才运行代码，否则它可能不会在实现脚本的地方拾取任何tr等。

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

包括具有唯一ID的<div>，去除空格并添加<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>

有什么方法可以清除/隐藏两个td表中的第一个td，而无需访问第一个td？

1 个答案:

使用CSS选择器

使用JavaScript