show/hide input when input value is empty(jquery, javascript)

Question

I want to hide the column when there is no value of <input> in <td> like the picture.

No.1 in the photo is the initial table.

No.2 in the photo is a table that hides the th column of 3,5.

NO.3 in the photo is a table that hides the th column of 5.

I want the columns 3 and 5 to be hidden as in 2, but the 3 with <input> is not hidden.

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

As far as I understand is that you want to hide column 3 and 5 from the table when there is no value in them and column 3 have the text box in it. I have examined your code and you need to change your code a little bit.

1. You need to place your keyup function inside the document.ready function so that it executes when DOM is fully loaded. Right now it is executing before the DOM load.
2. You need to get the column index number that you want to hide or show based on the condition.

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