使用Jquery将内容从一个TD复制到另一个TD？

Question

我想从顶部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>

我只需要知道这是否可能以及我应该采用什么方法来实现这一目标。感谢。

Answer 1

转到插件并添加一个名为custom css和js的新插件 然后创建一个新的js并添加使用.table-dates以使用jquery

执行任何操作

Answer 2

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>

Answer 3

使用jQuery可以像这样完成。

＆＃13;

＆＃13;

$(document).ready(function() {
  $(".table-dates").each(function(i,e) {
  	var elem = $("<span/>").append($(e).html());
  	$("table").find(".table-times")[i].prepend(elem.html());
  });
 
});

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;