CODEWITHSUNDEEP
jqueryhtmlhtml-table
David Ortega
David Ortega

Reputation: 915

Replace parent table keeping child tables

I have searched for this on SO but none of the options seems to work as intended. I have a table that has content I want to reformat, but ocasionally it can come with inner tables I do want to keep as tables. The problem is that I want to delete the parent table but leaving possible inner tables. Here is my code.

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

I tried using selectors to get the first level child like .find('.contentpanel > td, .contentpanel > th') or children('table'), but it doesn't work. The first table has a contentpanel class, but doesn't help me so much.

EDIT:

Here is the HTML I want to reformat

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

And my desired HTML output would be this:

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

But with my current code I get this

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

Here I link the JSFiddle

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

Upvotes: 0

Views: 49

Answers (1)

guest271314
guest271314

Reputation: 1

Try using .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/

Upvotes: 1

Related Questions