Копировать контент из одного TD в другой с помощью Jquery? - PullRequest
Новая
       10

Копировать контент из одного TD в другой с помощью Jquery?

0 голосов
/ 06 июня 2018

Я хочу скопировать даты сверху td и поместить каждую из них в соответствующую td ниже, чтобы я мог затем использовать CSS, чтобы поместить всю информацию в одну строку.Это происходит от плагина WordPress, который я не могу изменить.В настоящее время у меня есть это: 

<table>
  <tr>
    <td class="table-dates">Fri 15</td>
    <td class="table-dates">Fri 16</td>
  </tr>
  <tr>
    <td class=“table-times”>
      <a href="">9:30pm</a>
      <br>
      <a href="">9:30pm</a>
    </td>
    <td class=“table-times”>
      <a href="">4:30pm</a>
      <br>
      <a href="">6:30pm</a>
    </td>
  </tr>
</table>

Моя цель такова ниже, очевидно, я удалю td с table-dates классом, так как они мне больше не понадобятся: 

<table>
  <tr>
    <td class="table-dates">Fri 15</td>
    <td class="table-dates">Fri 16</td>
  </tr>
  <tr>
    <td class=“table-times”>
      <span>Fri 15</span>
      <a href="">9:30pm</a>
      <br>
      <a href="">9:30pm</a>
    </td>
    <td class=“table-times”>
      <span>Fri 16</span>
      <a href="">4:30pm</a>
      <br>
      <a href="">6:30pm</a>
    </td>
  </tr>
</table>

Мне просто нужно знать, возможно ли это, и какой подход я должен использовать для достижения этой цели.Спасибо.

Ответы [ 3 ]

0 голосов
/ 06 июня 2018 

var trlist = $("tr");
var toptd = $(trlist[0]).find("td");
var bottomtd = $(trlist[1]).find("td");

toptd.each(function (idx) {
  var span = $("<span>");
  var td = $(this);
  span.text(td.text());
  $(bottomtd[idx]).prepend(span);
  //console.log(idx);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td class="table-dates">Fri 15</td>
    <td class="table-dates">Fri 16</td>
  </tr>
  <tr>
    <td class=“table-times”>
      <a href="">9:30pm</a>
      <br>
      <a href="">9:30pm</a>
    </td>
    <td class=“table-times”>
      <a href="">4:30pm</a>
      <br>
      <a href="">6:30pm</a>
    </td>
  </tr>
</table>
0 голосов
/ 06 июня 2018

Использование jQuery можно сделать так же. 

$(document).ready(function() {
  $(".table-dates").each(function(i,e) {
  	var elem = $("<span/>").append($(e).html());
  	$("table").find(".table-times")[i].prepend(elem.html());
  });
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td class="table-dates">Fri 15</td>
<td class="table-dates">Fri 16</td>
</tr>
<tr>
<td class="table-times">
<a href="">9:30pm</a>
<br>
<a href="">9:30pm</a>
</td>
<td class="table-times">
<a href="">4:30pm</a>
<br>
<a href="">6:30pm</a>
</td>
</tr>
</table>
0 голосов
/ 06 июня 2018

Перейдите к плагинам и добавьте новый плагин с именем custom css и js, затем создайте новый js и добавьте использование .table-date, чтобы делать все, что вы хотите с jquery

...