jQuery table replace

Question

We have a table:

<table>
<tr>
    <td width="10">1</td>
    <td>text 1</td>
</tr>
<tr>
    <td width="10">2</td>
    <td>text 2</td>
</tr>
<tr>
    <td width="10">3</td>
    <td>text 3</td>
</tr>
<tr>
    <td width="10">4</td>
    <td>text 4</td>
</tr>
<tr>
    <td width="10">5</td>
    <td>text 5</td>
</tr>
<tr>
    <td width="10">6</td>
    <td>text 6</td>
</tr>
<tr>
    <td width="10">7</td>
    <td>text 7</td>
</tr>
<tr>
    <td width="10">8</td>
    <td>text 8</td>
</tr>
<tr>
    <td width="10">9</td>
    <td>text 9</td>
</tr>
<tr>
    <td width="10">10</td>
    <td>text 10</td>
</tr>
</table>

We update this table by throwing into each <tr> 3 <td>, each <td> with width="10" attribute must be deleted.

It must look like:

<table>
<tr>
    <td>text 1</td>
    <td>text 2</td>
    <td>text 3</td>
</tr>
<tr>
    <td>text 4</td>
    <td>text 5</td>
    <td>text 6</td>
</tr>
<tr>
    <td>text 7</td>
    <td>text 8</td>
    <td>text 9</td>
</tr>
<tr>
    <td>text 10</td>
</tr>
</table>

How can we do this?

Thanks.

Answer 1

Remove those elements with an attribute-equals selector before wrapping, like this:

$("table tr td[width='10']").remove();
var elems = $("table tr td").unwrap();
for(var i = 0; i < elems.length; i+=3) {
  elems.slice(i, i+3).wrapAll("<tr></tr>");
}​

You can play with it here