使用 Javascript 将 table 单元格的内容复制到新的 div 中

Question

我正在研究 well-known 商店模板的布局。外部模板完全是 editable，但实际的产品网格不仅硬编码到页面中，而且还是古老的表格格式。所以，我想做的是使用 Javascript 提取 table 单元格的内容并将它们附加到 self-populating div 中，我可以将其设置为响应式布局。然后，我会隐藏原来的 table.

页面使用的table全是content cells和buffer cells之类的，不过为了简化，这里举个主要项目的例子（我用Javascript来加类全部 - 我没有包括在这个例子中 - 和几个 ID，以区分不同的单元格。这是我的样本的样子。

<table id="category-table">
    <tbody>
        <tr>
            <td id="titlecell_1">
                <a href="#" id="title_1">Title 1</a>
            </d>
        </tr>
        <tr>
            <td id="imagecell_1">
                <a href="#" id="image_1"><img src="image.jpg" /></a>
            </d>
        </tr>
        <tr>
            <td id="titlecell_2">
                <a href="#" id="title_2">Title 1</a>
            </d>
        </tr>
        <tr>
            <td id="imagecell_2">
                <a href="#" id="image_2"><img src="image.jpg" /></a>
            </d>
        </tr>
    </tbody>
<table>

我想将标题、图片及其周围的 A 标签插入 div 中，制作如下内容：

<div id="categories">
    <div id="category-div_1">
        <h1><a href="#" id="new-title_1">Title</a></h1>
        <a href="#" id="new-image_1"><img src="image.jpg" /></a>
    </div>
    <div id="category-div_2">
        <h1><a href="#" id="new-title_2">Title</a></h1>
        <a href="#" id="new-image_2"><img src="image.jpg" /></a>
    </div>
</div>

这显然只是两个项目的示例，但此页面将包含大约 16 个项目，因此此脚本显然需要将所有单元格的等价物逐渐添加到新的 divs 中。

我见过不同的 jquery 解决方案，例如，使用 clone()、replaceWith() 和 replaceAll() 方法，但都是用一个项目替换另一个项目.我想将它们全部替换为各自的 divs。我不知道其中一种方法的增强版本是否最好，或者某种索引系统是否会更好。我才刚刚开始学习 Javascript，所以我很难理解这一点。任何帮助将不胜感激。

Answer 1

你可以这样做

//create the categories div
var $cat = $('<div/>', {
    id: 'categories'
});

//iterate through all the td's which has id starting with `titlecell_`
$('#category-table td[id^="titlecell_"]').each(function (idx) {
    //create the inner structure
    var id = idx + 1;
    var $div = $('<div/>', {
        id: 'category-div_' + id
    }).appendTo($cat);
    $('<a />', {
        id: 'new-title_' + id,
        href: '#',
        text: $(this).find('a').text()
    }).wrap('<h1 />').parent().appendTo($div);
    $('<a />', {
        id: 'new-image_' + id,
        href: '#'
    }).append($('<img />', {
        src: $(this).parent().next().find('img').attr('src')
    })).appendTo($div);
})

//append the `#categoreis` to the target element
$cat.appendTo('body')

//create the categories div
var $cat = $('<div/>', {
  id: 'categories'
});

//iterate through all the td's which has id starting with `titlecell_`
$('#category-table td[id^="titlecell_"]').each(function(idx) {
  //create the inner structure
  var id = idx + 1;
  var $div = $('<div/>', {
    id: 'category-div_' + id
  }).appendTo($cat);
  $('<a />', {
    id: 'new-title_' + id,
    href: '#',
    text: $(this).find('a').text()
  }).wrap('<h1 />').parent().appendTo($div);
  $('<a />', {
    id: 'new-image_' + id,
    href: '#'
  }).append($('<img />', {
    src: $(this).parent().next().find('img').attr('src')
  })).appendTo($div);
})

//append the `#categoreis` to the target element
$cat.appendTo('body')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="category-table">
  <tbody>
    <tr>
      <td id="titlecell_1">
        <a href="#" id="title_1">Title 1</a>
      </td>
    </tr>
    <tr>
      <td id="imagecell_1">
        <a href="#" id="image_1">
          <img src="image.jpg" />
        </a>
      </td>
    </tr>
    <tr>
      <td id="titlecell_2">
        <a href="#" id="title_2">Title 1</a>
      </td>
    </tr>
    <tr>
      <td id="imagecell_2">
        <a href="#" id="image_2">
          <img src="image.jpg" />
        </a>
      </td>
    </tr>
  </tbody>
</table>

注意：我仍然不建议这样做，因为如果有大量数据，这可能会给客户端带来一些沉重的负担，我建议可以编辑模板

Answer 2

另一种方式：

var html = '', i = 0;
$("#category-table td").each(function(){
    if($(this).is("[id^='titlecell']")){
        html += '<div id="category-div_'+(i=i+1)+'">';
        html += '<h1>'+($(this).html().replace('id="title_', 'id="new-title_'))+'</h1>';
    }else if($(this).is("[id^='imagecell']")){
        html += $(this).html().replace('id="image_', 'id="new-image_')+'</div>';   
    }
});
$('<div id="categories"/>').append(html).appendTo('body');

编辑：我忘了 </div>。已更新。

JSFiddle

使用 Javascript 将 table 单元格的内容复制到新的 div 中

Using Javascript to copy content of table cells into new divs

html

javascript

jquery

replace

html-table