Question

我在SO上搜索了这个，但没有一个选项似乎按预期工作。我有一个表格，其中包含我想要重新格式化的内容，但偶尔会出现内部表格，我希望将其保留为表格。问题是我想删除父表但留下可能的内部表。这是我的代码。

var crespformat = $('#contenido-resp');
var crespcontent = crespformat.find("td, th").contents().detach();
crespformat.find("table").remove();
crespformat.append(crespcontent);

我尝试使用选择器来获得第一级孩子，例如.find('.contentpanel > td, .contentpanel > th')或children('table')，但它不起作用。第一个表有一个 contentpanel 类，但对我帮助不大。

编辑：

这是我要重新格式化的HTML

<div id="contenido-resp">
<table class="contentpanel">
   <tbody>
      <tr>
           <td>
               <img src="http://www.domain..." alt="..." />
           <p>
               Some content here
           </p>
           <table>
                 <tbody>
                      <tr>
                          <td>
                          <p><!-- Content I do want to remain as table --></p>
                          </td>
                          <td>
                          <span><!-- Content I do want to remain as table --></span>
                          </td>
                          <td>
                          <!-- Content I do want to remain as table -->
                          </td>
                       </tr>
                   </tbody>
               </table>
           </td>
       </tr>
   </tbody>
</table>
</div>

我想要的HTML输出是这样的：

<div id="contenido-resp">
   <img src="http://www.domain..." alt="..." />
       <p>
           Some content here
       </p>
       <table>
           <tbody>
               <tr>
                  <td>
                     <p><!-- Content I do want to remain as table --></p>
                  </td>
                  <td>
                     <span><!-- Content I do want to remain as table --></span>
                  </td>
                  <td>
                     <!-- Content I do want to remain as table -->
                  </td>
               </tr>
            </tbody>
          </table>
</div>

但是使用我目前的代码，我得到了这个

<div id="contenido-resp">
   <img src="http://www.domain..." alt="..." />
       <p>
           Some content here
       </p>
       <p><!-- Content I do want to remain as table --></p>
       <span><!-- Content I do want to remain as table --></span>
       <!-- Content I do want to remain as table -->
</div>

这里我链接了JSFiddle

http://jsfiddle.net/2of0kLp7/embedded/result/

Answer 1

尝试使用.clone()

$(document).ready(function(){
  var crespformat = $('#contenido-resp');  
  var crespcontent = crespformat.find("td:first");
  var content = crespcontent.find("img, p, table").clone();
  crespformat.html(content);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div id="contenido-resp">
  <table class="contentpanel">
    <tbody>
      <tr>
        <td>
          <img src="http://placehold.it/500x200" alt="..." />
          <p>
            Some content here
          </p>
          <table>
            <tbody>
              <tr>
                <td>
                  <p>Text on first celll</p>
                </td>
                <td>
                  <span>Content on second cell</span>
                </td>
                <td>
                  <img src="http://placehold.it/350x150" alt="img-on-cell" />
                </td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
    </tbody>
  </table>
</div>

jsfiddle http://jsfiddle.net/2of0kLp7/3/

替换保留子表的父表

1 个答案: