jQuery突破表

Question

I have a standard HTML formatted table, that dynamically generates the content, via Zend Framework. From which I have an issue altering the form internally PHP side. So I need to alter the tables appearance somehow. With that on the occasion I have an element show up in one of the rows and when this element shows up I want to break out of the table and then do something after it then start the table again.

Basically I want to inject the equivlant of

</tbody></table>/*other stuff*/<table><tbody> after the row containing the one element I seek which in this case is a label.

I tried $("label[for='theLable']").parents('tr').after('</tbody></table><br><table><tbody>') which appears to ignore the ending table parts add the br, and then does a complete open/close tag for table and tbody within the same table I am trying to break out of so inbetween tr tags basically it adds this new table

Whats the best way to approach this concept?

update with jsfiddle link

http://jsfiddle.net/cPWDh/

Answer 1

You can't really modify the HTML of the document the way you're thinking, since it's not a legitimate way to alter the DOM.

Instead, I would create a new table and .append the rows you want to move to it, which will automatically move them from their current location (instead of copying them):

$(document).ready(function() {
    var $trow = $('label[for="specialLabel"]').closest('tr'),
        $table = $trow.closest('table');
    $('<table>').append( $trow.nextAll().andSelf() ).insertAfter($table);
});​

http://jsfiddle.net/cPWDh/1/

Answer 2

this approach won't work in js. What you could do if the table has not too many rows is this:

var nextTable = $("table").after("/*other stuff*/<table id="nextTable"></table>");
//now you loop over the lines of your original table that you want to have after the "break", and move them to the nextTable:

var before = true;
$("table tr").each(function(){
   if ($(this).has("[for='theLable']")) {
       before = false;
   }
   if (!before) {
       nextTable.append($(this));
   }
});