Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 22.01.2021, 11:27
Интересующийся
Отправить личное сообщение для Alexprom Посмотреть профиль Найти все сообщения от Alexprom
 
Регистрация: 19.09.2018
Сообщений: 26

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

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

Я искал такой скрипт, потом искал что-то похожее. Но все четно, может и находил но не понял что это именно он.
Скажите пожалуйста, такой скрипт существует?
Может есть у кого-то?
Заранее большое спасибо!
Ответить с цитированием
  #2 (permalink)  
Старый 22.01.2021, 11:45
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,465

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

Написать скрипт, который проставляет определенный класс определенным элементам таблицы - не проблема. Проблема в том, что вам нужно модифицировать разметку в визуальном редакторе.
Если операция разовая, то можно её провести в полуавтоматическом режиме (ручками куда-то что-то копировать, а классы проставлять скриптом). Иначе нужно писать плагин для WYSIWYG.
Ответить с цитированием
  #3 (permalink)  
Старый 22.01.2021, 12:06
Интересующийся
Отправить личное сообщение для Alexprom Посмотреть профиль Найти все сообщения от Alexprom
 
Регистрация: 19.09.2018
Сообщений: 26

Сообщение от Nexus Посмотреть сообщение
Ну переводит и пусть переводит, в чем проблема-то?

Написать скрипт, который проставляет определенный класс определенным элементам таблицы - не проблема. Проблема в том, что вам нужно модифицировать разметку в визуальном редакторе.
Если операция разовая, то можно её провести в полуавтоматическом режиме (ручками куда-то что-то копировать, а классы проставлять скриптом). Иначе нужно писать плагин для WYSIWYG.
Я таблицу копирую с сайта уже с данными, и вставляю в редактор и сохраняю, после сохранения перевожу. Это рецепты для диабетиков, но таблица некрасивая если там половина цифр а остальное прописью... Мне бы только классы проставить и все)
Ответить с цитированием
  #4 (permalink)  
Старый 22.01.2021, 12:45
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,465

Alexprom, у вас точно заголовок таблицы находится в тэге tbody, не в thead?
Ответить с цитированием
  #5 (permalink)  
Старый 22.01.2021, 12:47
Интересующийся
Отправить личное сообщение для Alexprom Посмотреть профиль Найти все сообщения от Alexprom
 
Регистрация: 19.09.2018
Сообщений: 26

Сообщение от Nexus Посмотреть сообщение
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>
Ответить с цитированием
  #6 (permalink)  
Старый 22.01.2021, 12:52
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,465

<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>
Ответить с цитированием
  #7 (permalink)  
Старый 22.01.2021, 13:14
Интересующийся
Отправить личное сообщение для Alexprom Посмотреть профиль Найти все сообщения от Alexprom
 
Регистрация: 19.09.2018
Сообщений: 26

Сообщение от Nexus Посмотреть сообщение
<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>
Да, именно то что надо, спасибо большое! К сожалению, в самом редакторе не работает. Я скопировал ваш код сразу в редактор "вставил через кнопку исходный" и потом просто скрипт отдельно подключил, он не срабатывает(
Ответить с цитированием
  #8 (permalink)  
Старый 22.01.2021, 13:25
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,465

Сообщение от 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);
})();

Последний раз редактировалось Nexus, 22.01.2021 в 13:27.
Ответить с цитированием
  #9 (permalink)  
Старый 22.01.2021, 13:36
Интересующийся
Отправить личное сообщение для Alexprom Посмотреть профиль Найти все сообщения от Alexprom
 
Регистрация: 19.09.2018
Сообщений: 26

Сообщение от 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);
})();
Класс))) То что нужно, большое спасибо
Ответить с цитированием
  #10 (permalink)  
Старый 22.01.2021, 13:40
Интересующийся
Отправить личное сообщение для Alexprom Посмотреть профиль Найти все сообщения от Alexprom
 
Регистрация: 19.09.2018
Сообщений: 26

Сообщение от 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);
})();
Извините за наглость, а можно сделать кнопку? Я бы добавил ее возле редактора, и по нажатию всплывала эта форма?? Если нет, то и так сойдет) Еще раз спасибо
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Добавить класс в элемент списка li DDim1000 Events/DOM/Window 12 11.08.2018 17:39
Добавить ID и class таблице kolhoz jQuery 4 10.07.2015 12:50
Добавить класс для <option> rafaello Общие вопросы Javascript 7 02.11.2013 12:15
Как добавить класс, если он переменная? j.r.r jQuery 2 30.08.2013 22:52
Как добавить метод ко всем элементам? zubr80 Events/DOM/Window 3 06.04.2009 04:46