Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Добавить класс к таблице но не ко всем td (https://javascript.ru/forum/dom-window/81745-dobavit-klass-k-tablice-no-ne-ko-vsem-td.html)

Alexprom 22.01.2021 12:27
Добавить класс к таблице но не ко всем td
 
Здравствуйте уважаемые форумчане!
Ищу скрипт который добавит класс notranslate к определенным столбцам, если такой существует. Так как google переводчик сайта, переводит в таблице цифры, и чтобы он не переводил, нужно добавить класс, а вручную добавлять это слишком долго(

Есть редактор ckeditor 4 я копирую в него html таблицу. Там всего три колонки и N-строк. Необходимо добавить класс в 2 и 3 колонку во все строки этих колонок начиная с второго номера строки. То есть, в 2 и 3 колонки необходимо пропустить шапку.

Я искал такой скрипт, потом искал что-то похожее. Но все четно, может и находил но не понял что это именно он.
Скажите пожалуйста, такой скрипт существует?
Может есть у кого-то?
Заранее большое спасибо!

Nexus 22.01.2021 12:45
Ну переводит и пусть переводит, в чем проблема-то?

Написать скрипт, который проставляет определенный класс определенным элементам таблицы - не проблема. Проблема в том, что вам нужно модифицировать разметку в визуальном редакторе.
Если операция разовая, то можно её провести в полуавтоматическом режиме (ручками куда-то что-то копировать, а классы проставлять скриптом). Иначе нужно писать плагин для WYSIWYG.

Alexprom 22.01.2021 13:06
Цитата:
Сообщение от Nexus (Сообщение 533053)
Ну переводит и пусть переводит, в чем проблема-то?

Написать скрипт, который проставляет определенный класс определенным элементам таблицы - не проблема. Проблема в том, что вам нужно модифицировать разметку в визуальном редакторе.
Если операция разовая, то можно её провести в полуавтоматическом режиме (ручками куда-то что-то копировать, а классы проставлять скриптом). Иначе нужно писать плагин для WYSIWYG.
Я таблицу копирую с сайта уже с данными, и вставляю в редактор и сохраняю, после сохранения перевожу. Это рецепты для диабетиков, но таблица некрасивая если там половина цифр а остальное прописью... Мне бы только классы проставить и все)

Nexus 22.01.2021 13:45
Alexprom, у вас точно заголовок таблицы находится в тэге tbody, не в thead?

Alexprom 22.01.2021 13:47
Цитата:
Сообщение от Nexus (Сообщение 533055)
Alexprom, у вас точно заголовок таблицы находится в тэге tbody, не в thead?
Вот одна из таблиц
<div class="tg-wrap"><table>
<thead>
  <tr>
    <th>Продукты</th>
    <th>Вес (г)</th>
    <th>Ккал</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>Земляника, клубника</td>
    <td>200</td>
    <td>82</td>
  </tr>
  <tr>
    <td>Молоко 2,5%</td>
    <td>100</td>
    <td>54</td>
  </tr>
  <tr>
    <td>Творог, 0 %</td>
    <td>500</td>
    <td>400</td>
  </tr>
  <tr>
    <td>Горький шоколад</td>
    <td>50</td>
    <td>270</td>
  </tr>
  <tr>
    <td>Кофе растворимый</td>
    <td>30</td>
    <td>36</td>
  </tr>
  <tr>
    <td>Банан</td>
    <td>160</td>
    <td>154</td>
  </tr>
  <tr>
    <td>Итого:</td>
    <td>1040</td>
    <td>996</td>
  </tr>
</tbody>
</table></div>

Nexus 22.01.2021 13:52 
<div class="tg-wrap"><table>
<thead>
  <tr>
    <th>Продукты</th>
    <th>Вес (г)</th>
    <th>Ккал</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>Земляника, клубника</td>
    <td>200</td>
    <td>82</td>
  </tr>
  <tr>
    <td>Молоко 2,5%</td>
    <td>100</td>
    <td>54</td>
  </tr>
  <tr>
    <td>Творог, 0 %</td>
    <td>500</td>
    <td>400</td>
  </tr>
  <tr>
    <td>Горький шоколад</td>
    <td>50</td>
    <td>270</td>
  </tr>
  <tr>
    <td>Кофе растворимый</td>
    <td>30</td>
    <td>36</td>
  </tr>
  <tr>
    <td>Банан</td>
    <td>160</td>
    <td>154</td>
  </tr>
  <tr>
    <td>Итого:</td>
    <td>1040</td>
    <td>996</td>
  </tr>
</tbody>
</table></div>

<style>td {padding: 5px; background: red;}td.notranslate {background: yellow;}</style>
<script>
document.querySelectorAll('.tg-wrap tbody tr').forEach((row, rowIndex) => {
	row.querySelectorAll('td').forEach((cell, cellIndex) => {
  	if (!cellIndex) return;
    
    cell.classList.add('notranslate');
  });
});
</script>

Alexprom 22.01.2021 14:14
Цитата:
Сообщение от Nexus (Сообщение 533057) 
<div class="tg-wrap"><table>
<thead>
  <tr>
    <th>Продукты</th>
    <th>Вес (г)</th>
    <th>Ккал</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>Земляника, клубника</td>
    <td>200</td>
    <td>82</td>
  </tr>
  <tr>
    <td>Молоко 2,5%</td>
    <td>100</td>
    <td>54</td>
  </tr>
  <tr>
    <td>Творог, 0 %</td>
    <td>500</td>
    <td>400</td>
  </tr>
  <tr>
    <td>Горький шоколад</td>
    <td>50</td>
    <td>270</td>
  </tr>
  <tr>
    <td>Кофе растворимый</td>
    <td>30</td>
    <td>36</td>
  </tr>
  <tr>
    <td>Банан</td>
    <td>160</td>
    <td>154</td>
  </tr>
  <tr>
    <td>Итого:</td>
    <td>1040</td>
    <td>996</td>
  </tr>
</tbody>
</table></div>

<style>td {padding: 5px; background: red;}td.notranslate {background: yellow;}</style>
<script>
document.querySelectorAll('.tg-wrap tbody tr').forEach((row, rowIndex) => {
	row.querySelectorAll('td').forEach((cell, cellIndex) => {
  	if (!cellIndex) return;
    
    cell.classList.add('notranslate');
  });
});
</script>
Да, именно то что надо, спасибо большое! К сожалению, в самом редакторе не работает. Я скопировал ваш код сразу в редактор "вставил через кнопку исходный" и потом просто скрипт отдельно подключил, он не срабатывает(

Nexus 22.01.2021 14:25
Цитата:
Сообщение от Alexprom
К сожалению, в самом редакторе не работает.
Цитата:
Сообщение от Nexus
Написать скрипт, который проставляет определенный класс определенным элементам таблицы - не проблема. Проблема в том, что вам нужно модифицировать разметку в визуальном редакторе.
Я об этом сразу написал :)

Попробуйте:
(() => {
    const htmlString = prompt('Enter your HTML table');
    if (!htmlString || !htmlString.trim().length) return;

    const container = document.createElement('div');
    container.innerHTML = htmlString;

    container.querySelectorAll('tbody tr').forEach((row, rowIndex) => {
        row.querySelectorAll('td').forEach((cell, cellIndex) => {
            if (cellIndex) cell.classList.add('notranslate');
        });
    });

    prompt('Take your prepared table', container.innerHTML);
})();

Alexprom 22.01.2021 14:36
Цитата:
Сообщение от Nexus (Сообщение 533059)
Я об этом сразу написал :)

Попробуйте:
(() => {
    const htmlString = prompt('Enter your HTML table');
    if (!htmlString || !htmlString.trim().length) return;

    const container = document.createElement('div');
    container.innerHTML = htmlString;

    container.querySelectorAll('tbody tr').forEach((row, rowIndex) => {
        row.querySelectorAll('td').forEach((cell, cellIndex) => {
            if (cellIndex) cell.classList.add('notranslate');
        });
    });

    prompt('Take your prepared table', container.innerHTML);
})();
Класс))) То что нужно, большое спасибо ;)

Alexprom 22.01.2021 14:40
Цитата:
Сообщение от Nexus (Сообщение 533059)
Я об этом сразу написал :)

Попробуйте:
(() => {
    const htmlString = prompt('Enter your HTML table');
    if (!htmlString || !htmlString.trim().length) return;

    const container = document.createElement('div');
    container.innerHTML = htmlString;

    container.querySelectorAll('tbody tr').forEach((row, rowIndex) => {
        row.querySelectorAll('td').forEach((cell, cellIndex) => {
            if (cellIndex) cell.classList.add('notranslate');
        });
    });

    prompt('Take your prepared table', container.innerHTML);
})();
Извините за наглость, а можно сделать кнопку? Я бы добавил ее возле редактора, и по нажатию всплывала эта форма?? Если нет, то и так сойдет) Еще раз спасибо ;)

Nexus 22.01.2021 14:54 
<button id="set-notranslate-class-fot-table-cell-button">Set «notranslate» class for table cells</button>

<script>
    document.addEventListener('DOMContentLoaded', () => {
        const button = document.querySelector('#set-notranslate-class-fot-table-cell-button');
        if (!button) return;

        button.addEventListener('click', () => {
            const htmlString = prompt('Enter your HTML table');
            if (!htmlString || !htmlString.trim().length) return;

            const container = document.createElement('div');
            container.innerHTML = htmlString;

            container.querySelectorAll('tbody tr').forEach((row, rowIndex) => {
                row.querySelectorAll('td').forEach((cell, cellIndex) => {
                    if (cellIndex) cell.classList.add('notranslate');
                });
            });

            prompt('Take your prepared table', container.innerHTML);
        });
    });
</script>

Alexprom 22.01.2021 14:56
Цитата:
Сообщение от Nexus (Сообщение 533062) 
<button id="set-notranslate-class-fot-table-cell-button">Set «notranslate» class for table cells</button>

<script>
    document.addEventListener('DOMContentLoaded', () => {
        const button = document.querySelector('#set-notranslate-class-fot-table-cell-button');
        if (!button) return;

        button.addEventListener('click', () => {
            const htmlString = prompt('Enter your HTML table');
            if (!htmlString || !htmlString.trim().length) return;

            const container = document.createElement('div');
            container.innerHTML = htmlString;

            container.querySelectorAll('tbody tr').forEach((row, rowIndex) => {
                row.querySelectorAll('td').forEach((cell, cellIndex) => {
                    if (cellIndex) cell.classList.add('notranslate');
                });
            });

            prompt('Take your prepared table', container.innerHTML);
        });
    });
</script>
Да, то что нужно))) Большое вам спасибо!!!) И очень хорошего дня))):victory:

sainivedant 05.02.2021 15:35
Написать скрипт, который проставляет определенный класс определенным элементам таблицы - не проблема. Проблема в том, что вам нужно модифицировать разметку в визуальном редакторе. mobdro

Regards, tubemate


Часовой пояс GMT +3, время: 14:05.