Как обернуть текст в тег?
Здравствуйте. Есть простая таблица:
<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>
Возможном ли так сделать? Спасибо! |
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;
}
</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>
|
рони,
спасибо вам большое за ответ. Наверное, надо было мне начинать с другого. Смотрите, я написал такой скрипт:
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 (повторение) я указываю в количестве два, а выводится четыре. Почему так, где у меня ошибка? |
LADYX,
не осилил ваше описание, можно пример что на входе, что на выходе? |
LADYX,
строки 5 и 11 зачем? пост #3 |
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>
|
рони,
не осилили мое описание?)) Ну блин, постарался расписать всё понятно) Да, ваш ответ (пост 6) именно то что нужно. Спасибо вам! Я увидел, где допускал ошибку. Цитата:
|
Цитата:
|
рони,
всё понял, всё сделал. Огромное спасибо! |
| Часовой пояс GMT +3, время: 06:29. |