Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 06.03.2021, 11:46
Аватар для LADYX
Профессор
Отправить личное сообщение для LADYX Посмотреть профиль Найти все сообщения от LADYX
 
Регистрация: 19.02.2015
Сообщений: 217

Как обернуть текст в тег?
Здравствуйте. Есть простая таблица:

<table>
  <tr>
    <td>Текст</td>
    <td>10</td>
  </tr>
  <tr>
    <td>Текст</td>
    <td>20</td>
  </tr>
  <tr>
    <td>Текст</td>
    <td>30</td>
  </tr>
</table>


Скажите, пожалуйста, как можно с помощью javascript обернуть текст в левых ячейках таблицы в тег <div>, а в правых в тег <span>? Чтобы в результате вывод был следующим:

<table>
  <tr>
    <td><div>Текст</div></td>
    <td><span>10</span></td>
  </tr>
  <tr>
    <td><div>Текст</div></td>
    <td><span>20</span></td>
  </tr>
  <tr>
    <td><div>Текст</div></td>
    <td><span>30</span></td>
  </tr>
</table>


Возможном ли так сделать? Спасибо!
Ответить с цитированием
  #2 (permalink)  
Старый 06.03.2021, 13:05
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,447

LADYX,
Сообщение от LADYX
Регистрация: 19.02.2015
<!DOCTYPE html>

<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
td > div {
    background-image: -webkit-linear-gradient(left, #0000CD, #1E90FF);
    background-image: linear-gradient(to right, #0000CD, #1E90FF);
    color: #FFFF00;
}
td > span {
    background-image: -webkit-linear-gradient(left, #FF1493, #F0E68C);
    background-image: linear-gradient(to right, #FF1493, #F0E68C);
    color: #FFFFFF;
}
    </style>

    <script>
document.addEventListener( "DOMContentLoaded" , () => {
document.querySelectorAll("td").forEach((td, i) => {
    let el = document.createElement(i % 2 ? "span" : "div");
    el.append(td.firstChild);
    td.append(el)
})
  });
    </script>
</head>

<body>
<table>
    <tr>
        <td>Текст</td>
        <td>10</td>
    </tr>
    <tr>
        <td>Текст</td>
        <td>20</td>
    </tr>
    <tr>
        <td>Текст</td>
        <td>30</td>
    </tr>
</table>

</body>
</html>
Ответить с цитированием
  #3 (permalink)  
Старый 06.03.2021, 13:34
Аватар для LADYX
Профессор
Отправить личное сообщение для LADYX Посмотреть профиль Найти все сообщения от LADYX
 
Регистрация: 19.02.2015
Сообщений: 217

рони,
спасибо вам большое за ответ. Наверное, надо было мне начинать с другого. Смотрите, я написал такой скрипт:

var table = document.getElementById("table");
var tr = table.getElementsByTagName("tr");
var td = null;

for (var i = 0; i < tr.length; i++) {
  td = tr[i].getElementsByTagName("td");
  for (var n = 0; n < td.length; n++) {
    text = "?";
    td[0].innerHTML += '!'.repeat(2);
    td[1].innerHTML = text.repeat(2) + td[1].innerHTML;
  }
}


здесь я добавляю в левую ячейку текст (восклицательные знаки) в конце, а в правую ячейку текст (вопросительные знаки) вначале. Вот мне и не получается перед добавлением текста, обернуть не тот который я добавляю, а уже существующий текст в теги с помощью createElement. Вот как это сделать правильно? И еще такой вопрос: repeat (повторение) я указываю в количестве два, а выводится четыре. Почему так, где у меня ошибка?
Ответить с цитированием
  #4 (permalink)  
Старый 06.03.2021, 14:02
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,447

LADYX,
не осилил ваше описание, можно пример что на входе, что на выходе?
Ответить с цитированием
  #5 (permalink)  
Старый 06.03.2021, 14:14
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,447

LADYX,
строки 5 и 11 зачем? пост #3
Ответить с цитированием
  #6 (permalink)  
Старый 06.03.2021, 14:21
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,447

LADYX,
<!DOCTYPE html>
<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        td>div {
            background-image: -webkit-linear-gradient(left, #0000CD, #1E90FF);
            background-image: linear-gradient(to right, #0000CD, #1E90FF);
            color: #FFFF00;
        }

        td>span {
            background-image: -webkit-linear-gradient(left, #FF1493, #F0E68C);
            background-image: linear-gradient(to right, #FF1493, #F0E68C);
            color: #FFFFFF;
        }
        td{
            border: 1px solid red;
        }

    </style>
    <script>
        document.addEventListener("DOMContentLoaded", () => {
            var table = document.getElementById("table");
            var tr = table.getElementsByTagName("tr");
            console.log(tr)
            var td = null;
            for (var i = 0; i < tr.length; i++) {
                td = tr[i].getElementsByTagName("td");
                var text = "?";
                td[0].innerHTML = `<div>${td[0].innerHTML}</div>${'!'.repeat(2)}`;
                td[1].innerHTML = `${text.repeat(2)}<span>${td[1].innerHTML}</span>`;
            }
        });
    </script>
</head>

<body>
    <table id="table">
        <tr>
            <td>Текст</td>
            <td>10</td>
        </tr>
        <tr>
            <td>Текст</td>
            <td>20</td>
        </tr>
        <tr>
            <td>Текст</td>
            <td>30</td>
        </tr>
    </table>
</body>

</html>
Ответить с цитированием
  #7 (permalink)  
Старый 06.03.2021, 14:42
Аватар для LADYX
Профессор
Отправить личное сообщение для LADYX Посмотреть профиль Найти все сообщения от LADYX
 
Регистрация: 19.02.2015
Сообщений: 217

рони,
не осилили мое описание?)) Ну блин, постарался расписать всё понятно)

Да, ваш ответ (пост 6) именно то что нужно. Спасибо вам! Я увидел, где допускал ошибку.

Сообщение от рони
строки 5 и 11 зачем? пост #3
ну так же мы находим все элементы (ячейки). Или я что-то не так делаю?
Ответить с цитированием
  #8 (permalink)  
Старый 06.03.2021, 14:59
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,447

Сообщение от LADYX
Или я что-то не так делаю?
зачем находить одно и тоже, и добавлять 5 раз?
Ответить с цитированием
  #9 (permalink)  
Старый 06.03.2021, 15:21
Аватар для LADYX
Профессор
Отправить личное сообщение для LADYX Посмотреть профиль Найти все сообщения от LADYX
 
Регистрация: 19.02.2015
Сообщений: 217

рони,
всё понял, всё сделал. Огромное спасибо!
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как выделить убрать выбранный текст с динамическими полями prog77 jQuery 3 19.07.2017 21:56
как обернуть слова в тексте в тег strong prog77 Javascript под браузер 10 17.07.2017 14:43
svg - как включить текст к rect, circle и т.п.? eugen35 (X)HTML/CSS 0 25.08.2014 19:28
Добавить текст в тег Джснуль Общие вопросы Javascript 1 19.04.2014 17:16
прогкрутка к якорям cOAPerator Общие вопросы Javascript 20 27.08.2013 02:30