jquery - How to capture contents of a label to be exact header of the table -
i have 2 <ul> <li> structures , table in middle of them, way
<ul> <li> text <label>1#</label> <input type="text" value="" /> </li> <li> text <label>2#</label> <input type="text" value="" /> </li> <li> text <label>3#</label> <input type="text" value="" /> </li> <li> text <label>4#</label> <input type="text" value="" /> </li> <li> text <label>5#</label> <input type="text" value="" /> </li> <li> <!-- first read contains label inside --> <label>6#</label> </li> </ul> <table> <tbody> <tr> <td>#1</td> <td>#2</td> <td>#3</td> </tr> <tr> <td>#1</td> <td>#2</td> <td>#3</td> </tr> <tr> <td>#1</td> <td>#2</td> <td>#3</td> </tr> </tbody> </table> <ul> <li> <label>7#</label> <input type="text" value="" /> </li> <li> <label>8#</label> <input type="text" value="" /> </li> <li> <label>9#</label> <input type="text" value="" /> </li> <li> <label>10#</label> <input type="text" value="" /> </li> </ul> i need dynamically grab first <li> above table has <label> tag , turns title of table. getting end result way.
<ul> <li> text <label>1#</label> <input type="text" value="" /> </li> <li> text <label>2#</label> <input type="text" value="" /> </li> <li> text <label>3#</label> <input type="text" value="" /> </li> <li> text <label>4#</label> <input type="text" value="" /> </li> <li> text <label>5#</label> <input type="text" value="" /> </li> </ul> <table> <thead> <tr> <th> <label>6#</label> </th> <tr> </thead> <tbody> <tr> <td>#1</td> <td>#2</td> <td>#3</td> </tr> <tr> <td>#1</td> <td>#2</td> <td>#3</td> </tr> <tr> <td>#1</td> <td>#2</td> <td>#3</td> </tr> </tbody> </table> <ul> <li> <label>7#</label> <input type="text" value="" /> </li> <li> <label>8#</label> <input type="text" value="" /> </li> <li> <label>9#</label> <input type="text" value="" /> </li> <li> <label>10#</label> <input type="text" value="" /> </li> </ul> you can this?...
a more jquery-ish way:
loop through li elements, find 1 1 child, child label.
build thead/tr/th, append label, add table, , remove li used hold it.
var lbl = null; $('li').each( function() { var li = $(this); if (li.children().length == 1) { var labels = li.find('label'); if (labels.length == 1) { lbl = labels; return false; } } } ); if (lbl) { var text = lbl.text(); var li = lbl.closest('li'); var thead = $('<thead>'); var tr = $('<tr>').appendto(thead); var th = $('<th>').appendto(tr).append(lbl); li.remove(); $('table').prepend(thead); } example: http://jsfiddle.net/fgjlg/9/
Comments
Post a Comment