Диапазон JavaScript для ввода
Я имею дело с ситуацией на моем веб-сайте, когда я хотел бы, чтобы пользователь мог щелкнуть какой-либо текст (окруженный <span>) и превратить его в поле ввода, а затем вернуться к обычному тексту после редактирования или терять фокус.
Я нашел множество вещей повсюду, но на самом деле ни один из них не работает!
Тот же самый рабочий jsfiddle не работает на моей реальной веб-странице. Итак, вот код моей страницы, я бы хотел, чтобы кто-нибудь объяснил мне, почему он не работает, и помог мне это исправить.
<html>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function() {
$('span').live('click', function() {
var input = $('<input />', {
'type': 'text',
'name': 'aname',
'value': $(this).html()
});
$(this).parent().append(input);
$(this).remove();
input.focus();
});
$('input').live('blur', function() {
$(this).parent().append($('<span />').html($(this).val()));
$(this).remove();
});
});
</script>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
}
.box {
border: 1px;
border-style: solid;
padding: 1px;
}
.rotated {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
table {
empty-cells: show;
padding: 0px;
border-spacing: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
}
.padd {
padding: 0px;
}
.padding {
padding: 0px;
}
</style>
<body>
<div style = "margin: 0 auto; width: 40%;">
Currently Viewing.
<div style = " width: 100%; display: flex;
border-bottom: 1px; border-bottom-color: black; border-bottom-style:solid;">
<div style = "width: 25%;">Date:</div>
<div style = "width: 25%;">asdasdasd</div>
<div style = "width: 25%;">Client: </div>
<div style = "width: 25%;">asdsd</div>
</div>
<div>
<div style = " width: 100%; display: flex;
border-bottom: 1px; border-bottom-color: black; border-bottom-style:solid;">
<div style = "width: 25%;">Style #:</div>
<div style = "width: 25%;">asdasdasd</div>
<div style = "width: 25%;">Season / Year: </div>
<div style = "width: 25%;">asdsd</div>
</div>
</div>
<div>
<div style = " width: 100%; display: flex;
border-bottom: 1px; border-bottom-color: black; border-bottom-style:solid;">
<div style = "width: 25%;">Size Range:</div>
<div style = "width: 25%;">asdasdasd</div>
<div style = "width: 25%;"> Preparation/Thread: </div>
<div style = "width: 25%;">asdsd</div>
</div>
</div>
<div>
<div style = " width: 100%; display: flex;
border-bottom: 1px; border-bottom-color: black; border-bottom-style:solid;">
<div style = "width: 25%;">Sample Size:</div>
<div style = "width: 25%;">asdasdasd</div>
<div style = "width: 25%;">Description: </div>
<div style = "width: 25%;"> asdsd</div>
</div>
</div>
<br> Before....
<span>
test
</span>
<br>
<table class = "padding box" style = " width: 100%;border: 1px; border-style: solid; padding: 0px; table-layout: fixed; border-collapse: collapse;">
<tr>
<td colspan = "3">
</td>
<td class = "box">
Tol
</td>
<td class = "box">
XS
</td>
<td class = "box">
S
</td>
<td class = "box">
M
</td>
<td class = "box">
L
</td>
<td class = "box">
XL
</td>
</tr>
<br>
<tr style = "height: 10px;" class = "padding box">
<td class = "box padding rotated" style = "width: 15%; vertical-align: middle; word-wrap:break-word; height: 200px;" rowspan = "2">BODY</td>
<td>
test
</td>
<td class = "box padding">
test
</td>
<td class = "box padding">
test
</td>
<td class = "box padding">
test
</td>
<td class = "box padding">
test
</td>
<td class = "box padding">
test
</td>
<td class = "box padding">
test
</td>
<td>
test
</td>
</tr>
<tr style = "height: 10px;" class = "padding box">
<td>
test
</td>
<td class = "box padding">
test
</td>
<td class = "box padding">
test
</td>
<td class = "box padding">
test
</td>
<td class = "box padding">
test
</td>
<td class = "box padding">
test
</td>
<td class = "box padding">
test
</td>
<td>
test
</td>
</tr>
</tr>
</table>
<br> After...
<br>
<table class = "padding box" style = " width: 100%;border: 1px; border-style: solid; padding: 0px; table-layout: fixed; border-collapse: collapse;">
<tr>
<td colspan = "3">
</td>
<td class = "box">
Tol
</td>
<td class = "box">
XS
</td>
<td class = "box">
S
</td>
<td class = "box">
M
</td>
<td class = "box">
L
</td>
<td class = "box">
XL
</td>
</tr>
<br>
<tr style = "height: 10px;" class = "padding box">
<td class = "box padding rotated" style = "width: 15%; vertical-align: middle; word-wrap:break-word; height: 200px;" rowspan = "2">BODY</td>
<td>
</td>
<td class = "box padding">
</td>
<td class = "box padding">
test
</td>
<td class = "box padding">
test
</td>
<td class = "box padding">
test
</td>
<td class = "box padding">
test
</td>
<td class = "box padding">
test
</td>
<td>
test
</td>
</tr>
<tr style = "height: 10px;" class = "padding box">
<td>
test
</td>
<td class = "box padding">
test
</td>
<td class = "box padding">
test
</td>
<td class = "box padding">
test
</td>
<td class = "box padding">
test
</td>
<td class = "box padding">
test
</td>
<td class = "box padding">
test
</td>
<td>
test
</td>
</tr>
</tr>
</table>
</div>
</div>
</body>
</html>Я пытаюсь превратить эту часть в текстовое поле
<br>
Before....
<span>
test
</span>
<br>
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
1
34
4
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 4
.live() устарел в jQuery 1.7 и полностью удален в 1.9. Вы используете 3.3.1, поэтому вам следует использовать .on().
Ну .... хорошо, в этом есть смысл. Но вся моя функция сейчас не работает. вы можете показать мне JSFiddle с использованием .on ()?
—
24.07.2018 02:18
@digit ну для одного ваш html недействителен
—
24.07.2018 02:19
Измените .live() на .on(), поскольку функция .live() устарела.
Ниже рабочий код:
<html>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(function() {
$('span').on('click', function() {
var input = $('<input />', {
'type': 'text',
'name': 'aname',
'value': $(this).html()
});
$("#container").append(input);
$("#testSpan").remove();
input.focus();
});
$('input').on('blur', function() {
$(this).parent().append($('<span />').html($(this).val()));
$(this).remove();
});
});
</script>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
}
.box {
border: 1px;
border-style: solid;
padding: 1px;
}
.rotated {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
table {
empty-cells: show;
padding: 0px;
border-spacing: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
}
.padd {
padding: 0px;
}
.padding {
padding: 0px;
}
</style>
<body>
<div style = "margin: 0 auto; width: 40%;">
Currently Viewing.
<div style = " width: 100%; display: flex;
border-bottom: 1px; border-bottom-color: black; border-bottom-style:solid;">
<div style = "width: 25%;">Date:</div>
<div style = "width: 25%;">asdasdasd</div>
<div style = "width: 25%;">Client: </div>
<div style = "width: 25%;">asdsd</div>
</div>
<div>
<div style = " width: 100%; display: flex;
border-bottom: 1px; border-bottom-color: black; border-bottom-style:solid;">
<div style = "width: 25%;">Style #:</div>
<div style = "width: 25%;">asdasdasd</div>
<div style = "width: 25%;">Season / Year: </div>
<div style = "width: 25%;">asdsd</div>
</div>
</div>
<div>
<div style = " width: 100%; display: flex;
border-bottom: 1px; border-bottom-color: black; border-bottom-style:solid;">
<div style = "width: 25%;">Size Range:</div>
<div style = "width: 25%;">asdasdasd</div>
<div style = "width: 25%;"> Preparation/Thread: </div>
<div style = "width: 25%;">asdsd</div>
</div>
</div>
<div>
<div style = " width: 100%; display: flex;
border-bottom: 1px; border-bottom-color: black; border-bottom-style:solid;">
<div style = "width: 25%;">Sample Size:</div>
<div style = "width: 25%;">asdasdasd</div>
<div style = "width: 25%;">Description: </div>
<div style = "width: 25%;"> asdsd</div>
</div>
</div>
<br> Before....
<div id = "container">
<span id = "testSpan">test</span>
</div>
<br>
<table class = "padding box" style = " width: 100%;border: 1px; border-style: solid; padding: 0px; table-layout: fixed; border-collapse: collapse;">
<tr>
<td colspan = "3">
</td>
<td class = "box">
Tol
</td>
<td class = "box">
XS
</td>
<td class = "box">
S
</td>
<td class = "box">
M
</td>
<td class = "box">
L
</td>
<td class = "box">
XL
</td>
</tr>
<br>
<tr style = "height: 10px;" class = "padding box">
<td class = "box padding rotated" style = "width: 15%; vertical-align: middle; word-wrap:break-word; height: 200px;" rowspan = "2">BODY</td>
<td>
test
</td>
<td class = "box padding">
test
</td>
<td class = "box padding">
test
</td>
<td class = "box padding">
test
</td>
<td class = "box padding">
test
</td>
<td class = "box padding">
test
</td>
<td class = "box padding">
test
</td>
<td>
test
</td>
</tr>
<tr style = "height: 10px;" class = "padding box">
<td>
test
</td>
<td class = "box padding">
test
</td>
<td class = "box padding">
test
</td>
<td class = "box padding">
test
</td>
<td class = "box padding">
test
</td>
<td class = "box padding">
test
</td>
<td class = "box padding">
test
</td>
<td>
test
</td>
</tr>
</tr>
</table>
<br> After...
<br>
<table class = "padding box" style = " width: 100%;border: 1px; border-style: solid; padding: 0px; table-layout: fixed; border-collapse: collapse;">
<tr>
<td colspan = "3">
</td>
<td class = "box">
Tol
</td>
<td class = "box">
XS
</td>
<td class = "box">
S
</td>
<td class = "box">
M
</td>
<td class = "box">
L
</td>
<td class = "box">
XL
</td>
</tr>
<br>
<tr style = "height: 10px;" class = "padding box">
<td class = "box padding rotated" style = "width: 15%; vertical-align: middle; word-wrap:break-word; height: 200px;" rowspan = "2">BODY</td>
<td>
</td>
<td class = "box padding">
</td>
<td class = "box padding">
test
</td>
<td class = "box padding">
test
</td>
<td class = "box padding">
test
</td>
<td class = "box padding">
test
</td>
<td class = "box padding">
test
</td>
<td>
test
</td>
</tr>
<tr style = "height: 10px;" class = "padding box">
<td>
test
</td>
<td class = "box padding">
test
</td>
<td class = "box padding">
test
</td>
<td class = "box padding">
test
</td>
<td class = "box padding">
test
</td>
<td class = "box padding">
test
</td>
<td class = "box padding">
test
</td>
<td>
test
</td>
</tr>
</tr>
</table>
</div>
</div>
</body>
</html>Нажмите на «тест», и вы увидите, что текстовое поле помещается внизу страницы, а не на место текста.
—
24.07.2018 02:20
@digit проверьте мой код сейчас. Обновленный ответ. Остальное, вы можете изменить CSS и т. д. В соответствии с вашими требованиями.
—
24.07.2018 02:34
Потрясающие! Можете ли вы обновить код, чтобы он вернулся в Испанию после редактирования / расфокусировки?
—
24.07.2018 02:35
@digit, который не был частью требования в вашем вопросе.
—
24.07.2018 02:40
$ ('input'). on ('blur', function () {$ (this) .parent (). append ($ ('<span />'). html ($ (this) .val ()))) ; $ (this) .remove ();}); ---- это в моем коде, но он не работает ... это была одна из вещей, о которых я пытался упомянуть, но, похоже, забыл. почему это не работает?
—
24.07.2018 02:44
@digit см. мой ответ, чтобы узнать больше о том, что вам нужно изменить и почему
—
24.07.2018 02:53
Если вы запустите фрагмент стека, вы увидите сообщение об ошибке $(...).live is not a function. Он был удален еще в v1.9.
Вы должны создать свою собственную делегацию событий, используя on()
<html>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function() {
$(document).on('click', 'span', function() {
var input = $('<input />', {
'type': 'text',
'name': 'aname',
'value': $(this).html()
});
$(this).after(input);
$(this).remove();
input.focus();
});
$(document).on('blur', 'input', function() {
$(this).after($('<span />').html($(this).val()));
$(this).remove();
});
});
</script>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
}
.box {
border: 1px;
border-style: solid;
padding: 1px;
}
.rotated {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
table {
empty-cells: show;
padding: 0px;
border-spacing: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
}
.padd {
padding: 0px;
}
.padding {
padding: 0px;
}
</style>
<body>
<div style = "margin: 0 auto; width: 40%;">
Currently Viewing.
<div style = " width: 100%; display: flex;
border-bottom: 1px; border-bottom-color: black; border-bottom-style:solid;">
<div style = "width: 25%;">Date:</div>
<div style = "width: 25%;">asdasdasd</div>
<div style = "width: 25%;">Client: </div>
<div style = "width: 25%;">asdsd</div>
</div>
<div>
<div style = " width: 100%; display: flex;
border-bottom: 1px; border-bottom-color: black; border-bottom-style:solid;">
<div style = "width: 25%;">Style #:</div>
<div style = "width: 25%;">asdasdasd</div>
<div style = "width: 25%;">Season / Year: </div>
<div style = "width: 25%;">asdsd</div>
</div>
</div>
<div>
<div style = " width: 100%; display: flex;
border-bottom: 1px; border-bottom-color: black; border-bottom-style:solid;">
<div style = "width: 25%;">Size Range:</div>
<div style = "width: 25%;">asdasdasd</div>
<div style = "width: 25%;"> Preparation/Thread: </div>
<div style = "width: 25%;">asdsd</div>
</div>
</div>
<div>
<div style = " width: 100%; display: flex;
border-bottom: 1px; border-bottom-color: black; border-bottom-style:solid;">
<div style = "width: 25%;">Sample Size:</div>
<div style = "width: 25%;">asdasdasd</div>
<div style = "width: 25%;">Description: </div>
<div style = "width: 25%;"> asdsd</div>
</div>
</div>
<br> Before....
<span>
test
</span>
<br>
<table class = "padding box" style = " width: 100%;border: 1px; border-style: solid; padding: 0px; table-layout: fixed; border-collapse: collapse;">
<tr>
<td colspan = "3">
</td>
<td class = "box">
Tol
</td>
<td class = "box">
XS
</td>
<td class = "box">
S
</td>
<td class = "box">
M
</td>
<td class = "box">
L
</td>
<td class = "box">
XL
</td>
</tr>
<br>
<tr style = "height: 10px;" class = "padding box">
<td class = "box padding rotated" style = "width: 15%; vertical-align: middle; word-wrap:break-word; height: 200px;" rowspan = "2">BODY</td>
<td>
test
</td>
<td class = "box padding">
test
</td>
<td class = "box padding">
test
</td>
<td class = "box padding">
test
</td>
<td class = "box padding">
test
</td>
<td class = "box padding">
test
</td>
<td class = "box padding">
test
</td>
<td>
test
</td>
</tr>
<tr style = "height: 10px;" class = "padding box">
<td>
test
</td>
<td class = "box padding">
test
</td>
<td class = "box padding">
test
</td>
<td class = "box padding">
test
</td>
<td class = "box padding">
test
</td>
<td class = "box padding">
test
</td>
<td class = "box padding">
test
</td>
<td>
test
</td>
</tr>
</tr>
</table>
<br> After...
<br>
<table class = "padding box" style = " width: 100%;border: 1px; border-style: solid; padding: 0px; table-layout: fixed; border-collapse: collapse;">
<tr>
<td colspan = "3">
</td>
<td class = "box">
Tol
</td>
<td class = "box">
XS
</td>
<td class = "box">
S
</td>
<td class = "box">
M
</td>
<td class = "box">
L
</td>
<td class = "box">
XL
</td>
</tr>
<br>
<tr style = "height: 10px;" class = "padding box">
<td class = "box padding rotated" style = "width: 15%; vertical-align: middle; word-wrap:break-word; height: 200px;" rowspan = "2">BODY</td>
<td>
</td>
<td class = "box padding">
</td>
<td class = "box padding">
test
</td>
<td class = "box padding">
test
</td>
<td class = "box padding">
test
</td>
<td class = "box padding">
test
</td>
<td class = "box padding">
test
</td>
<td>
test
</td>
</tr>
<tr style = "height: 10px;" class = "padding box">
<td>
test
</td>
<td class = "box padding">
test
</td>
<td class = "box padding">
test
</td>
<td class = "box padding">
test
</td>
<td class = "box padding">
test
</td>
<td class = "box padding">
test
</td>
<td class = "box padding">
test
</td>
<td>
test
</td>
</tr>
</tr>
</table>
</div>
</div>
</body>
</html>Если вы нажмете на текст «тест», вы увидите, что текстовое поле помещается внизу страницы, а не на свое место.
—
24.07.2018 02:28
Я не знал, что это проблема, в этом случае вы можете использовать after вместо append.
—
24.07.2018 02:34
Ответ принят как подходящий
ПЕРВЫЙ
html даже близко не к валидному. Теги BR не могут находиться внутри ТАБЛИЦЫ. у вас есть лишние закрывающие теги повсюду, а вещи, которые должны быть в HEAD, просто лежат в html (теги стиля и скрипта)
ВТОРОЕ И БОЛЕЕ ВАЖНОЕ
вы пытаетесь добавить события к несуществующим элементам. когда вы помещаете свои теги скрипта в верхнюю часть тела, JS будет запущен до того, как тело будет завершено.
Это становится особенно важным, потому что вместо того, чтобы правильно делегировать ваши события, вы вместо этого присоединяете новый прослушиватель событий к каждому отдельному тегу span.
https://learn.jquery.com/events/event-delegation/
В ТРЕТЬИХ
MVCE очень важен для StackOverflow. Не включайте ВСЮ страницу html, если ваш вопрос касается только одного тега span. Я очистил ваш html-файл для вас, чтобы у вас было рабочее решение "копировать и вставлять". однако ваш вопрос ДОЛЖЕН содержать только html, который имеет отношение к вашей проблеме.
https://stackoverflow.com/help/mcve
ИСПРАВЛЕНИЕ
время выполнения:
а. поместите JS в нижнюю часть тела, где он должен быть
б. заверните свой JS в
$(function(){})делегирование мероприятия
Все события здесь должны быть делегированы общему родителю:
$(document).on('click', 'span', function(){})liveустарел, и вы не должны его использовать.вы должны ВСЕГДА читать документацию по любой используемой библиотеке, ПРЕЖДЕ чем начать ее использовать.
$(function () {
$(document).on('click', 'span', function () {
console.info(this)
var input = $('<input />', {'type': 'text', 'value': $(this).text().trim()});
$(this).replaceWith(input);
input.focus();
});
$(document).on('blur', 'input', function () {
var val = $(this).val(),
span = $('<span />');
span.html(val)
$(this).replaceWith(span);
});
});body {
font-family:Arial, Helvetica, sans-serif;
font-size: 10px;
}
.cell {
width: 100%; display: flex; border-bottom: 1px; border-bottom-color: black; border-bottom-style:solid;
}
.box {
border: 1px;
border-style: solid;
padding: 1px;
}
.rotated {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
table {
empty-cells: show;
padding: 0px;
border-spacing: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
}
.padd {
padding: 0px;
}
.padding {
padding: 0px;
}<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style = "margin: 0 auto; width: 40%;">
Currently Viewing.
<div class = "cell">
<div style = "width: 25%;">Date:</div>
<div style = "width: 25%;" >asdasdasd</div>
<div style = "width: 25%;">Client: </div>
<div style = "width: 25%;">asdsd</div>
</div>
<div class = "cell">
<div style = "width: 25%;">Style #:</div>
<div style = "width: 25%;">asdasdasd</div>
<div style = "width: 25%;">Season / Year: </div>
<div style = "width: 25%;">asdsd</div>
</div>
<div class = "cell">
<div style = "width: 25%;">Size Range:</div>
<div style = "width: 25%;">asdasdasd</div>
<div style = "width: 25%;"> Preparation/Thread: </div>
<div style = "width: 25%;">asdsd</div>
</div>
<div class = "cell">
<div style = "width: 25%;">Sample Size:</div>
<div style = "width: 25%;" >asdasdasd</div>
<div style = "width: 25%;">Description: </div>
<div style = "width: 25%;"> asdsd</div>
</div>
<br>
Before....
<span>
test
</span>
<br>
<table class = "padding box" style = " width: 100%;border: 1px; border-style: solid; padding: 0px; table-layout: fixed; border-collapse: collapse;">
<thead>
<tr>
<td colspan = "3">
</td>
<td class = "box" >
Tol
</td>
<td class = "box">
XS
</td>
<td class = "box">
S
</td>
<td class = "box" >
M
</td>
<td class = "box" >
L
</td>
<td class = "box">
XL
</td>
</tr>
</thead>
<tbody>
<tr style = "height: 10px;" class = "padding box">
<td class = "box padding rotated" style = "width: 15%; vertical-align: middle; word-wrap:break-word; height: 200px;" rowspan = "2" >BODY</td>
<td>
test
</td>
<td class = "box padding">
test
</td>
<td class = "box padding">
test
</td>
<td class = "box padding">
test
</td>
<td class = "box padding">
test
</td>
<td class = "box padding">
test
</td>
<td class = "box padding">
test
</td>
<td>
test
</td>
</tr>
<tr style = "height: 10px;" class = "padding box">
<td>
test
</td>
<td class = "box padding">
test
</td>
<td class = "box padding">
test
</td>
<td class = "box padding">
test
</td>
<td class = "box padding">
test
</td>
<td class = "box padding">
test
</td>
<td class = "box padding">
test
</td>
<td>
test
</td>
</tr>
</tbody>
</table>
<br>
After...
<br>
<table class = "padding box" style = " width: 100%;border: 1px; border-style: solid; padding: 0px; table-layout: fixed; border-collapse: collapse;">
<thead>
<tr >
<td colspan = "3">
</td>
<td class = "box" >
Tol
</td>
<td class = "box">
XS
</td>
<td class = "box">
S
</td>
<td class = "box" >
M
</td>
<td class = "box" >
L
</td>
<td class = "box">
XL
</td>
</tr>
</thead>
<tbody>
<tr style = "height: 10px;" class = "padding box">
<td class = "box padding rotated" style = "width: 15%; vertical-align: middle; word-wrap:break-word; height: 200px;" rowspan = "2" >BODY</td>
<td>
</td>
<td class = "box padding">
</td>
<td class = "box padding">
test
</td>
<td class = "box padding">
test
</td>
<td class = "box padding">
test
</td>
<td class = "box padding">
test
</td>
<td class = "box padding">
test
</td>
<td>
test
</td>
</tr>
<tr style = "height: 10px;" class = "padding box">
<td>
test
</td>
<td class = "box padding">
test
</td>
<td class = "box padding">
test
</td>
<td class = "box padding">
test
</td>
<td class = "box padding">
test
</td>
<td class = "box padding">
test
</td>
<td class = "box padding">
test
</td>
<td>
test
</td>
</tr>
</tbody>
</table>
</div>Другие вопросы по теме
Удалить добавленные предыдущие данные после изменения события
Javascript canvas: анимация спрайта
Отображение вывода объектов JQuery
Удаление узла с карты javascript
Создание компонента, представляющего собой «смесь» двух компонентов (расширяющуюся из двух компонентов)
Откройте веб-сайт HTTPS в том же iframe
Angular 2/4/5 (не AngularJS): - как я могу взять верхнюю часть элемента .offset ().?
Ag-Grid: как сохранить и обновить порядок столбцов
Недопустимый селектор в querySelectorAll, использующий переменную для идентификатора
Как сохранить замену строки как объект в Javascript?
Похожие вопросы
Console.info () в Chrome не работает должным образом
Почему моя веб-страница обновляется после запроса POST NodeJS?
Javascript внутри тега svg
Я делаю инструмент для рисования. Почему, когда я рисую, он рисует нормально, но после того, как я рисую, отпускаю и снова начинаю рисовать, это ДЕЙСТВИТЕЛЬНО медленно
Почему я получаю «TypeError»: «flattenDeep (...)« is not iterable », если я не использую начальное значение для« reduce »?
Какое преимущество использования Symbol.for ('string') вместо простой строки
Скелет React Redux, возвращающий undefined для значения из состояния
Объедините массив живых аудиопотоков и воспроизведите его как один аудиопоток (без трещин между двумя потоками)
Поиск в 2D-массиве JavaScript очень медленный
Сбросить обратный отсчет в зависимости от установленного времени
Почему бы не использовать атрибут
content-editable?