使用 Jquery 将内容从一个 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 class 因为我不再需要它们了：

<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

转到插件并添加一个名为自定义 css 和 js 的新插件然后制作一个新的 js 并添加 use .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就可以做到这一点

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

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

Copy content from one TD to another with Jquery?

javascript

css

jquery

clone