Question

我正在尝试使用基于表＆gt; th＆gt;文本的jquery隐藏表列。我的代码只隐藏标题而不是与标题相关的td列。我以前也得到了索引，但无法得到确切的解决方案。有人可以帮我解决这个问题。 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());
    });
});

Answer 1

我的例子可能比必要的时间长一些，但概述了所需的逻辑。

您已经拥有了所需的索引，因此我循环遍历所有行，然后循环遍历所有子td元素并删除任何具有相同索引的元素：

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

演示： http://jsfiddle.net/6L5Jd/2/

注意：它们仍然存在于DOM中，如果您想完全摆脱它们，则应使用.remove()代替.hide()

Answer 2

我终于得到了我的问题的解决方案。我在这里发布它，以便它对其他开发人员有用。

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]);    
});       
});
    });

隐藏带有标题锚文本值的jquery表列

2 个答案: