Форум

LADYX · #1 (**permalink**) 06.03.2021, 12:46

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

<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, 14:05

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>

LADYX · #3 (**permalink**) 06.03.2021, 14:34

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

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, 15:02

LADYX,
не осилил ваше описание, можно пример что на входе, что на выходе?

рони · #5 (**permalink**) 06.03.2021, 15:14

LADYX,
строки 5 и 11 зачем? пост #3

рони · #6 (**permalink**) 06.03.2021, 15:21

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>

LADYX · #7 (**permalink**) 06.03.2021, 15:42

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

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

Сообщение от рони

строки 5 и 11 зачем? пост #3

ну так же мы находим все элементы (ячейки). Или я что-то не так делаю?

рони · #8 (**permalink**) 06.03.2021, 15:59

Сообщение от LADYX

Или я что-то не так делаю?

зачем находить одно и тоже, и добавлять 5 раз?

LADYX · #9 (**permalink**) 06.03.2021, 16:21

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

Форум

Справочник

Discord чат

Курсы javascript