В приведенном ниже коде, давайте назовем его test.htm, при загрузке я получаю сослужили таблицу:Замена выбранного диапазона ячеек jQuery?
Затем, если нажать на любую из ячеек заголовков, скрипт запускается, который перебирает строки таблицы с селектором jQuery «#mytable > tbody > tr», а затем он использует связанный фильтр «td:gt(0):lt(2)», чтобы выбрать диапазон из td ячеек в каждой строке. Так что, если наши столбцы индексируются 0,1,2,3,4, то gt(0) подберет 1,2,3,4 - и прикован lt(2) будет применяться к 0: 1, 1: 2, 2: 3, 3: 4, и поэтому только 0: 1, 1: 2 будет остаются или в терминах исходных индексов столбцов, выбираются 1,2.
Для этого выбора я хочу переключить класс, который меняет цвет фона, но я также хотел бы заменить содержимое двух ячеек. Так что я пытаюсь:
$("td:gt(0):lt(2)", $thisRow).toggleClass("viol");
$("td:gt(0):lt(2)", $thisRow).html("<td>AAAAA</td><td>BBBB</td>");
и переключаясь из класса (автономный) работает, но замена не делает:
Таким образом, вместо того, чтобы заменить две клетки с двумя другие ячейки - я заканчиваю расщепление каждого из ячеек, потому что .html() применяется к каждому элементу коллекции, и, кроме того, он изменяет HTML-код на внутренний элемент.
Итак, если в строке цикла итерации строки у меня есть доступ к строкам замены, например <td>AAAAA</td><td>BBBB</td>, для диапазона ячеек, как я могу заменить диапазон ячеек содержимым, описанным в этой строке HTML? Чтобы было ясно, в контексте этого примера я хочу, чтобы результат:
Код для test.htm:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<!-- <script type="text/javascript" src="../jquery-1.12.3.min.js"></script> -->
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<style type="text/css">
.a1 {
border-style: solid;
border-width: 1px;
font-size: 1em;
height:auto;
}
.viol { background-color: #DCE0FF; }
</style>
<script type="text/javascript">
function TableHeadListener(inevobj) {
console.log("TableHeadListener", inevobj);
ToggleTdRangeClass();
}
function ToggleTdRangeClass() {
$('#mytable > tbody > tr').each(function() {
$thisRow = $(this);
$("td:gt(0):lt(2)", $thisRow).toggleClass("viol");
$("td:gt(0):lt(2)", $thisRow).html("<td>AAAAA</td><td>BBBB</td>"); // AAA/BBB becomes html of each matched cell individually;!
});
}
createTable = function() {
var htmlTblString = '<table border="1" id="mytable">\n\
<thead>\n\
<tr>\n\
<th>Row h, cell h1</th>\n\
<th>Row h, cell h2</th>\n\
<th>Row h, cell h3</th>\n\
<th>Row h, cell h4</th>\n\
<th>Row h, cell h5</th>\n\
</tr>\n\
</thead>\n\
<tbody>\n\
<tr>\n\
<td>Row d1, cell d1-1</td>\n\
<td>Row d1, cell d1-2</td>\n\
<td>Row d1, cell d1-3</td>\n\
<td>Row d1, cell d1-4</td>\n\
<td>Row d1, cell d1-5</td>\n\
</tr>\n\
<tr>\n\
<td>Row d2, cell d2-1</td>\n\
<td>Row d2, cell d2-2</td>\n\
<td>Row d2, cell d2-3</td>\n\
<td>Row d2, cell d2-4</td>\n\
<td>Row d2, cell d2-5</td>\n\
</tr>\n\
</tbody>\n\
</table>\n';
$("#content").html(htmlTblString);
// add events:
var mtb = $("#mytable");
mtb.find('th').each(function() { $(this).on('click', null, this, TableHeadListener); });
}
ondocready = function() {
createTable();
}
$(document).ready(ondocready);
</script>
</head>
<body>
<h1>Hello World!</h1>
<div id="content" class="a1"></div>
</body>
</html>
Я не понимал, что вы пытаетесь сделать и какова ваша проблема, можете ли вы быть более ясными или создать скрипку? –
@Shlomi Haver - что я пытаюсь сделать, я написал: «Я нажимаю на любую из ячеек заголовка ..., чтобы выбрать диапазон ячеек td в каждой строке. К этому выбору я хочу переключить класс который меняет цвет фона, но я также хотел бы заменить содержимое двух ячеек »; моя проблема в том, что содержимое не заменяется, а вместо этого вставляется в ячейки. И есть полный HTML-файл, который вы можете просто скопировать/вставить в текстовый файл, вызвать его 'test.htm' и открыть его в Firefox - если у вас есть jQuery в том же месте (я буду менять его в онлайн сейчас), это будет работать. – sdbbs