通过后缀将多个TD插入表的中间 [英] Insert multiple TDs by Suffix into middle of Table

查看:82
本文介绍了通过后缀将多个TD插入表的中间的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一张2-4列和几行的表格.一些最右边的列有一个文本,一些有图像,一些有两个,有些可能都没有.

I have a table with 2-4 columns and several rows. Some of the very right columns have a text, some have an image, some have both and some may have neither of them.

我想将第二列的内容复制到3个新创建的列中,但将它们插入中间(在text和图像之前,如果适用).看起来像这样:

I want to copy the contents of the 2nd column into 3 newly created columns, but insert them in the middle (before text and the image, if applicable). So that it looks like that:

重要的是,循环遍历后缀,因为并非所有元素都需要移动.

It is important, to loop over the suffixes as not all elements need to be moved.

这种方法:

$("table td:nth-child(2) [id$=2]").each(function(i) {
  var $newCell = $(this).wrap('<td></td>').parent();
  var $newRow = $("table td:nth-child(2) [id$=1]").eq(i).parents('tr');
  $(this).parents('tr').remove();
  if ($newRow.find("td:contains('text')").index() > -1) {
    $newRow.find("td:contains('text')").before($newCell);
  } else if ($newRow.find("td.img").index() > -1) {
    $newRow.find("td:contains('img')").before($newCell);
  } else {
    $newRow.find("td:contains('img')").before($newCell);
  }
});

$("table td:nth-child(2) [id$=3]").each(function(i) {
  var $newCell = $(this).wrap('<td></td>').parent();
  var $newRow = $("table td:nth-child(2) [id$=1]").eq(i).parents('tr');
  $(this).parents('tr').remove();
  if ($newRow.find("td:contains('text')").index() > -1) {
    $newRow.find("td:contains('text')").before($newCell);
  } else if ($newRow.find("td.img").index() > -1) {
    $newRow.find("td:contains('img')").before($newCell);
  } else {
    $newRow.find("td:contains('img')").before($newCell);
  }
});

产生该结果:

FIDDLE .

推荐答案

我尝试用另一种方法来更新您的小提琴: https://jsfiddle.net/ed964u0o/1/

I've tried to update your fiddle with a different approach: https://jsfiddle.net/ed964u0o/1/

我保存了要插入到对象positions之后的元素.

I saved the element to insert after in the object positions.

这篇关于通过后缀将多个TD插入表的中间的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆