Question

我正在处理知名商店模板的布局。外部模板是完全可编辑的，但实际的产品网格不仅硬编码到页面中，而且它们也是古老的表格格式。所以，我想做的是使用Javascript来提取表格单元格的内容，并将它们附加到自我填充的div中，我可以将其设置为响应式布局。然后，我会隐藏原始表格。

页面使用的表格中充满了内容单元格和缓冲区单元格等，但为了简化它，这里有一个主要项目的示例（我使用Javascript来添加全部类 - 我没有＆＃39;在这个例子中包括 - 和几个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个，所以这个脚本显然需要逐步将所有单元格的等价物添加到新的div中。

我已经看到了不同的jquery解决方案，例如，使用clone()，replaceWith()和replaceAll()方法，但它们都将一个项目替换为另一个项目。我想在他们各自的div中替换所有这些。我不知道其中一种方法的加强版本是否最好，或者某种索引系统是否会更好。我刚刚开始学习Javascript，所以试图把握我的头脑是压倒性的。任何帮助将不胜感激。

Answer 1

另一种方式：

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

Answer 2

您可以执行类似

的操作

//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')

＆＃13;

//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')

＆＃13;

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

＆＃13;

注意：我仍然不建议这样做，因为如果有大量数据，这可能会导致客户端负载过重，我建议可以编辑模板

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

2 个答案: