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

【问题标题】：Copy content from one TD to another with Jquery?使用 Jquery 将内容从一个 TD 复制到另一个？
【发布时间】：2018-11-15 23:46:05
【问题描述】：

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

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

【问题讨论】：

您能否澄清“这是来自我无法更改的 wordpress 插件” - 您究竟不能更改什么？
对不起，它是用 PHP 编写的，我能得到的只是这个表的输出。我不想以表格格式显示它，所以我想用 CSS 来操作它。我需要同一元素中的日期和时间，这样我就可以在一行上输出，即周五 16 - 8:30、9:30 等...
对第一个表使用每个然后获取数据将该数据放入下一个表 $('td').each(function(t){console.log($(this).text( ));})。在同一个函数中，您还可以使用 addClass 方法添加自定义样式。需要更多校准

标签： javascript jquery css clone

【解决方案1】：

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

【讨论】：

我注意到代码中的 span 似乎没有围绕日期文本输出。我在 php 中添加了一个跨度并从 JQuery 中调用它... $("table").find(".table-times .date-span")[i].prepend(elem .html());

【解决方案2】：

转到插件并添加一个名为自定义 css 和 js 的新插件然后创建一个新的 js 并添加使用 .table-dates 来使用 jquery 做任何你想做的事情

【讨论】：

【解决方案3】：

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>

【讨论】：