代码之家 › 专栏 › 技术社区 › ultrarun

使用jquery将内容从一个td复制到另一个td?

clone css jquery javascript

-2

ultrarun · 技术社区 · 6 年前

我想把日期从上面抄下来 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 回复 | 直到 6 年前

Devian 6 年前

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

Sara Kat 6 年前

转到插件并添加一个名为自定义css和js的新插件然后创建一个新的js并添加use.table dates来使用jquery执行任何您想要的操作

Keith 6 年前

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>

推荐文章

Newbie_Coder · 如何使用Jquery无画布裁剪框架

1 年前

usman610 · Javascript代码在点击回车键和点击按钮时删除行

1 年前

NovoMannen · 导航中的下拉菜单在内容后面重叠

1 年前

Carly · 在页面加载时滑入div,然后单击以滑入和滑出(jQuery)

1 年前

Community wiki · jquery弹出窗口不会用按键关闭,但会点击

1 年前

Community wiki · Smarty IE9请求下载index.php文件(在上传未发生后)?是我的代码出错还是activecollab?

1 年前

Community wiki · 无法从jquery文档调用函数

1 年前

marzouk najib · Uncaught ReferenceError:未定义FullCalendar

2 年前

Pepe · 检查“data”属性是否包含输入值的一部分(jQuery)

2 年前

laurence keith albano · 如何使用Jquery在父类内添加子父类

2 年前