CODEWITHSUNDEEP
jquery
sqlchild
sqlchild

Reputation: 9064

Remove Table Columns and Headers , table having headers with a row-span and col-span using jquery

I have a table and need to remove its columns using jquery. Using this but it removes all the headers , but I want that only the first row header is removed.

   <table border="2" style="border-collapse:collapse;">
    <tr>
    <tr>
           <th rowspan="2">#</th>
           <th rowspan="2">A</th> 
           <th rowspan="2">B</th>
           <th rowspan="1" colspan="3">C</th>
    </tr>
<tr>

           <th>C-1</th>
           <th>C-2</th> 
           <th>C-3</th>
</tr>

<tr>

           <td>CONTENT</td>
           <td>CONTENT</td>
           <td>CONTENT</td>        
           <td>CONTENT</td>
           <td>CONTENT</td> 
           <td>CONTENT</td> 
</tr>


</table>

I need to remove the column A , and its corresponding tds , so am using : 

$('tr td:nth-child(2), tr th:nth-child(2)').remove();

It removes the TH - A and its column CONTENT but the <th> : C-2 also gets also removed , please help .

Upvotes: 0

Views: 218

Answers (1)

Prasenjit Kumar Nag
Prasenjit Kumar Nag

Reputation: 13461

Firstly You have an extra tr at the top of your code. Remove that and then you can using the first-child selector to accomplish what you want for this specific html structure like this

$('tr td:nth-child(2), tr:first-child > th:nth-child(2)').remove();​

Explanation

the selector which is excluding C-2 is tr:first-child > th:nth-child(2). The thing it telling jQuery is find the first tr then find the 2nd th . The > is to mean find th which are inside(or children of ) tr. As C-2 is in second tr it's being excluded. Let me know if that makes sense to you. I am not very good at writting.

Working demo

which changes the color of your desired elements. Use remove instead in your code.

Upvotes: 1

Related Questions