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

debugcn 发表于 Dev

喉

我正在尝试使用基于表>文本>的jQuery隐藏表列。我的代码仅隐藏标题，而不隐藏与标题相关的td列。我也曾经获得过th的索引，但无法获得确切的解决方案。有人可以帮我解决这个问题。这是我在小提琴中尝试过的

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

喉

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

解决方案

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。