Имеется такая таблица:
<table>
<tbody>
<!-- Стартовый состав -->
<tr><td>Player1</td><td class="_out">45</td></tr>
<tr><td>Player2</td><td class="_out">75</td></tr>
<tr><td>Player3</td><td class="_out">45</td></tr>
<tr><td>Player4</td><td></td></tr>
<!-- Замены -->
<tr><td>Player5</td><td class="_in">45</td></tr>
<tr><td>Player6</td><td class="_in">45</td></tr>
<tr><td>Player7</td><td class="_in">75</td></tr>
</tbody>
</table>
Как при помощи jquery поменять текст в ячейках, чтобы привести таблицу к такому виду:
<table>
<tbody>
<!-- Стартовый состав -->
<tr><td>Player1</td><td>(Player5, 45)</td></tr>
<tr><td>Player2</td><td>Player7, 75</td></tr>
<tr><td>Player3</td><td>(Player6, 45)</td></tr>
<tr><td>Player4</td><td></td></tr>
<!-- Замены -->
<tr><td>Player5</td><td>45</td></tr>
<tr><td>Player6</td><td>45</td></tr>
<tr><td>Player7</td><td>75</td></tr>
</tbody>
</table>
Вот так (не забудьте добавить к таблице id="format"
):
$( document ).ready(function() {
$("#format ._in").each(function(a){
var a = $(this);
var val = $(this).html();
$("#format ._out").each(function(e){
if ($(this).html() == val){
var player_in = $(a).parent().find("td:not(._in)").html();
$(this).html("(" + player_in + ", " + $(this).html() + ")");
return false;
}
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="format">
<tbody>
<!-- Стартовый состав -->
<tr>
<td>Player1</td>
<td class="_out">45</td>
</tr>
<tr>
<td>Player2</td>
<td class="_out">75</td>
</tr>
<tr>
<td>Player3</td>
<td class="_out">45</td>
</tr>
<tr>
<td>Player4</td>
<td></td>
</tr>
<!-- Замены -->
<tr>
<td>Player5</td>
<td class="_in">45</td>
</tr>
<tr>
<td>Player6</td>
<td class="_in">45</td>
</tr>
<tr>
<td>Player7</td>
<td class="_in">75</td>
</tr>
</tbody>
</table>
Посмотрите работу: https://jsfiddle.net/adudnik/L80gv5xj/
const inCells = $('table ._in').get();
$('table ._out').each(function () {
const inIdx = inCells.findIndex(el => el.textContent === this.textContent);
if (inIdx < 0) return;
const inCell = $(inCells.splice(inIdx, 1)[0]).removeClass('_in'),
newText = `(${inCell.prev().text()}, ${inCell.text()})`;
$(this).removeClass('_out').text(newText);
});
<table>
<tbody>
<!-- Стартовый состав -->
<tr><td>Player1</td><td class="_out">45</td></tr>
<tr><td>Player2</td><td class="_out">75</td></tr>
<tr><td>Player3</td><td class="_out">45</td></tr>
<tr><td>Player4</td><td></td></tr>
<!-- Замены -->
<tr><td>Player5</td><td class="_in">45</td></tr>
<tr><td>Player6</td><td class="_in">45</td></tr>
<tr><td>Player7</td><td class="_in">75</td></tr>
</tbody>
</table>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
Изучаю прототипы и добавляю к ним методы [call, bind, apply] и столкнулся с такой фичейНе понимаю откуда берется undefined
Как правильно поступить, у меня есть интерфейс(ICommon<T>), есть его несколько реализаций (HelloInt:ICommon<int>, HelloDouble:ICommon<double>)Теперь я хотел...
Учительница задала Пете домашнее задание — в заданном тексте расставить ударения в словах, после чего поручила Васе проверить это домашнее...