Есть ли способ очистить / скрыть первый тд в таблице тд, без доступа к первому тд? - PullRequest
Новая
       26

Есть ли способ очистить / скрыть первый тд в таблице тд, без доступа к первому тд?

0 голосов
/ 18 сентября 2018

Есть ли способ очистить или скрыть содержимое первого тд, от второго тд в таблице с двумя столбцами, без какого-либо доступа к редактированию фактических тд?

Так что я хотел бы скрыть числа в таблице ниже 

<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 (второй тд в каждой строке).

Я пытался использовать тег div с некоторым абсолютным позиционированием и просто накрывать первый тд вторым, но я никогда не мог заставить его работать согласованно.

1 Ответ

0 голосов
/ 18 сентября 2018

с помощью 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> с уникальным идентификатором в первый контент <td>. Сразу после этого поместите скрипт, который нацелен на ближайшего <table> родителя этого идентификатора, из которого вы можете извлечь необходимые <td> s, чтобы скрыть Кроме того, вам нужно убедиться, что вы запускаете код только после загрузки страницы, в противном случае он может не получить никаких tr с и т. Д., Кроме того, где реализован скрипт.

Самый простой способ найти ближайшего родителя, <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> с уникальным идентификатором, удаляя пробелы и добавляя теги <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>
...