當輸入值為空時顯示/隱藏輸入（jquery，javascript）

Question

當<td>中沒有<input>的值時，我想隱藏該列，如圖所示。

照片中的No.1是初始表。

照片中的 No.2 是隱藏th列的表格。

照片中的NO.3是一個隱藏th 5列的表格。

我希望第 3 列和第 5 列像第 2 列一樣被隱藏，但是帶有<input>的第 3 列沒有被隱藏。

HTML

<table class="table_10 myTable" border="1" >
    <colgroup>
        <col style="width :10%"/>
        <col />
        <col />
        <col />
        <col />
        <col />
        <col />
        <col />
        <col />        
    </colgroup>

    <tr>
        <th>1</th>
        <th>2</th>
        <th>3</th>
        <th>4</th>
        <th>5</th>
        <th>6</th>
        <th>7</th>
    </tr>  
    <tr>
        <td>11</td>
        <td>22</td>
        <td>
            <input class="control" value="" />           
        </td>
        <td>44</td>
        <td></td>
        <td>66</td>
        <td>77</td>
    </tr>
</table>

js/jquery

// 5 Hidden
function colDelete() {
    $('.myTable th').each(function (i) {
        var remove = 0;

        var cds = $(this).parents('table').find('tr td:nth-child(' + (i + 1) + ')')
        cds.each(function (j) { if (this.innerHTML == '') remove++; });

        if (remove == ($('.myTable tr').length - 1)) {
            $(this).hide();
            cds.hide();
        }
    });
}

// 3 Hidden
function abcd() {
    $('.control').keyup(function () {

        // If value is not empty
        if ($(this).val().length < 1) {
            // Hide the element
            $('.myTable > tr > th').hide();
            $('.myTable > tr > td').hide();
        } else {
            // Otherwise show it
            $('.myTable > tr > th').show();
            $('.myTable > tr > td').show();
        }
    }).keyup(); // Trigger the keyup event, thus running the handler on page load

}

Answer 1

據我了解，當第 3 列和第 5 列中沒有值並且第 3 列中有文本框時，您想從表中隱藏它們。 我已經檢查了您的代碼，您需要稍微更改一下代碼。

1. 您需要將 keyup function 放在 document.ready function 中，以便在 DOM 完全加載時執行。 現在它在 DOM 加載之前執行。
2. 您需要根據條件獲取要隱藏或顯示的列索引號。

 // 3 Hidden $(function(){ // this will be called when the DOM is ready $('.control').keyup(function () { var tdIndex = $(this).parent().index(); if ($(this).val().length < 1) { // Hide the element $(this).hide(); $('.myTable tr th').eq(tdIndex).hide(); $('.myTable tr td').eq(tdIndex).hide(); } else { // Otherwise show it $(this).show(); $('.myTable tr th').eq(tdIndex).show(); $('.myTable tr td').eq(tdIndex).show(); } }); });