CODEWITHSUNDEEP
jqueryshow-hide
Kurkula
Kurkula

Reputation: 6762

hiding jquery table columns with header anchor text value

I am trying to hide Table columns using jquery based on table>th>a text. My code only hides header and not the td columns related to header. I used to get index of th also but cant get exact solution. Could some one please help me on this issue. This is what I tried in fiddle

Enter th names seperated by commas
<input type=text id=thVal >
    <input type=button value='hide entered th related columns' id=btnclick>
<div id="tblMyProjects1" class="flexcroll">
    <table id="tblMyProjects" width=100%>
    <thead>
        <tr>
            <th scope="col">
<a href="/Default/MyProjects?sort=ID&amp;sortdir=ASC">ID</a>            </th>
            <th scope="col">
<a href="/Default/MyProjects?sort=Title&amp;sortdir=ASC">Title</a>            </th>
            <th scope="col">
<a href="/Default/MyProjects?sort=ProjectType&amp;sortdir=ASC">ProjectType</a>            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>10</td>
            <td>Test Project ALTERED</td>
            <td>test1</td>
        </tr>
        <tr>
            <td>11</td>
            <td>Test Project</td>
            <td>test2</td>
        </tr>
        <tr>
            <td>12</td>
            <td>Test Project</td>
            <td></td>
        </tr>
        <tr>
            <td>13</td>
            <td>pJPgOjDP</td>
            <td></td>
        </tr>
        <tr>
            <td>14</td>
            <td>Tve4Odmmm</td>
            <td>test 3</td>
        </tr>
        <tr>
            <td>15</td>
            <td>MDq6pQZG4Y</td>
            <td>tst 4</td>
        </tr>
        <tr>
            <td>16</td>
            <td>hkfeIDz06Z</td>
            <td>test 5</td>
        </tr>
        <tr>
            <td>17</td>
            <td>TestAutomationeHuthBrG</td>
            <td></td>
        </tr>
        <tr>
            <td>18</td>
            <td>TestAutomationZIv8k48KJv</td>
            <td>test7</td>
        </tr>
        <tr>
            <td>19</td>
            <td>TestAutomationjy6J8FrD</td>
            <td>testing</td>
        </tr>
    </tbody>
    </table>

</div>




function hidecolumn(columns) {
    var table = $('#tblMyProjects');
    var findColumn = $(table.find('th:contains(' + columns + ')'));
    var index = findColumn.index();
    findColumn.hide();
    $(table.find('tbody td:eq(' + index + ')')).hide();
}

$('#btnclick').click(function(){
    $('#tblMyProjects > tbody').each(function(){
hidecolumn($('#thVal').val());
    });
});

Upvotes: 0

Views: 1894

Answers (2)

Kurkula
Kurkula

Reputation: 6762

I finally got solution for my question. I am posting it here so that it will be useful for other developer.

solution

Enter th names seperated by commas
<input type=text id=thVal >
    <input type=button value='hide entered th related columns' id=btnclick>
<div id="tblMyProjects1" class="flexcroll">
    <table id="tblMyProjects" width=100%>
    <thead>
        <tr>
            <th scope="col">
<a href="/Default/MyProjects?sort=ID&amp;sortdir=ASC">ID</a>            </th>
            <th scope="col">
<a href="/Default/MyProjects?sort=Title&amp;sortdir=ASC">Title</a>            </th>
            <th scope="col">
<a href="/Default/MyProjects?sort=ProjectType&amp;sortdir=ASC">ProjectType</a>            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>10</td>
            <td>Test Project ALTERED</td>
            <td>test1</td>
        </tr>
        <tr>
            <td>11</td>
            <td>Test Project</td>
            <td>test2</td>
        </tr>
        <tr>
            <td>12</td>
            <td>Test Project</td>
            <td></td>
        </tr>
        <tr>
            <td>13</td>
            <td>pJPgOjDP</td>
            <td></td>
        </tr>
        <tr>
            <td>14</td>
            <td>Tve4Odmmm</td>
            <td>test 3</td>
        </tr>
        <tr>
            <td>15</td>
            <td>MDq6pQZG4Y</td>
            <td>tst 4</td>
        </tr>
        <tr>
            <td>16</td>
            <td>hkfeIDz06Z</td>
            <td>test 5</td>
        </tr>
        <tr>
            <td>17</td>
            <td>TestAutomationeHuthBrG</td>
            <td></td>
        </tr>
        <tr>
            <td>18</td>
            <td>TestAutomationZIv8k48KJv</td>
            <td>test7</td>
        </tr>
        <tr>
            <td>19</td>
            <td>TestAutomationjy6J8FrD</td>
            <td>testing</td>
        </tr>
    </tbody>
    </table>

</div>
function hidecolumn(columns) {
    var table = $('#tblMyProjects');
    var findColumn = $(table.find('th:contains(' + columns + ')'));
    var index = findColumn.index();
    var tds;
    findColumn.hide();
    $(table).find('tr').each(function(key, value) {
        tds = $(this).find('td');
        $(tds).each(function(tdkey, tdval) {
            if(tdkey == index)
                $(this).hide();
        });
    });
}
$(document).ready(function () {
$('#btnclick').click(function(){
   var array = $('#thVal').val().split(',');    
$.each(array,function(i){
    alert(array[i]);
hidecolumn(array[i]);    
});       
});
    });

Upvotes: 0

scrowler
scrowler

Reputation: 24425

My example is possibly a little longer than necessary, but outlines the logic required pretty well.

You already have the required index, so I'm looping through all rows, then looping through all children td elements and removing any that have the same index:

var tds;
$(table).find('tr').each(function(key, value) {
    tds = $(this).find('td');
    $(tds).each(function(tdkey, tdval) {
        if(tdkey == index)
            $(this).hide();
    });
});

Demo: http://jsfiddle.net/6L5Jd/2/

Note: they still exist in the DOM, if you want to get rid of them completely, you should use .remove() instead of .hide()

Upvotes: 1

Related Questions