Как заменить содержимое ячеек таблицы?

155
24 февраля 2022, 12:50

Имеется такая таблица:

<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>

Answer 1

Вот так (не забудьте добавить к таблице 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/

Answer 2

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>

READ ALSO
Prototype, call. Откуда берется второй undefined?

Prototype, call. Откуда берется второй undefined?

Изучаю прототипы и добавляю к ним методы [call, bind, apply] и столкнулся с такой фичейНе понимаю откуда берется undefined

89
Обобщенный список List

Обобщенный список List

Как правильно поступить, у меня есть интерфейс(ICommon<T>), есть его несколько реализаций (HelloInt:ICommon<int>, HelloDouble:ICommon<double>)Теперь я хотел...

168
Найти количество неверных ударений в тексте

Найти количество неверных ударений в тексте

Учительница задала Пете домашнее задание — в заданном тексте расставить ударения в словах, после чего поручила Васе проверить это домашнее...

98