Home>

By installing a close button inofand clicking that button
I want the clicked column to be deleted.
For example, after pressing the close button in the first column to delete it
So that you can delete it by pressing the close button in the 4th column
I want you to be able to repeat the same operation and create another column.

I was able to get more than one of the corresponding columns,
I don't know how to get the index for that column.

Corresponding source code
<!-Checkbox-><Ul><Li><Label for = "item-1"><input type = "checkbox" value = "1">Item 1</label></Li><Li><Label for = "item-2"><input type = "checkbox" value = "2">Item 2</label></Li></Ul><!-Button-><button>Run</button><button>Reset</button><table><thead><tr> <td></td> <th data-selection = "1"><Dib><p>×</p>Item 1-1    </th> <th data-selection = "1"><Dib><p>×</p>Item 1-2    </th> <th data-selection = "2"><Dib><p>×</p>Item 2-1    </th></tr></header><tbody><tr> <th>Text A</th> <td>Text A-1</td> <td>Text A-2</td> <td>Text A-3</td></tr><tr> <th>Text B</th> <td>Text B-1</td> <td>Text B-2</td> <td>Text B-3</td></tr></tbody></table>
.hide {
    display: none;
}
table thead th div {
    position: relative;
}
table thead th div .clm_close {
    position: absolute;
    top: 1px;left: 1px;
}
$(function () {
    // When you press the execute button, the unchecked column disappears
    $('.execution'). click (function () {
        let values ​​= [],


            col_index = [];
        $('[type = "checkbox"]: not (: checked)'). each (function () {
            values.push (parseInt ($(this) .val ()));
        });
        if (values) {
            $('thead tr'). children (). each (function (index, element) {
                if ($.inArray ($(element) .data ('selection'), values)! = -1) {
                    col_index.push (index);
                }
            });
            $.each (col_index, function (index, value) {
                $('tr'). each (function () {
                    $(this) .children (). eq (value) .addClass ('hide');
                });
            });
        }
    });
});

$(function () {
    // When you press the execute button, the checked column remains
    $('.execution'). click (function () {
        let values_1 = [];
        let col_index_1 = [];
        $('[type = "checkbox"]: checked'). each (function () {
            values_1 .push (parseInt ($(this) .val ()));
        });
        if (values_1) {
            $('thead tr'). children (). each (function (index, element) {
                if ($.inArray ($(element) .data ('selection'), values_1)! = -1) {
                    col_index_1.push (index);
                }
            });
            $.each (col_index_1, function (index, value) {
                $('tr'). each (function () {
                    $(this) .children (). eq (value) .removeClass ('hide');});
            });
        }
    });
});
// Check both to display all
$(function () {
  $('.execution'). click (function () {
  if ($('[value = "1"]'). prop ('checked')&&$('[value = "2"]'). prop ('checked')) {
     $('.hide'). removeClass ('hide');
  };
 })
});

// Press the reset button to display all
$('.reset'). click (function () {
    $('.hide'). removeClass ('hide');
    $('[type = "checkbox"]'). prop ('checked', false);
});
What I tried
$(function () {
    $('.clm_close'). click (function () {
        // Add .hide class to<th>of the cell where you clicked .clm_close and delete it
        $(this) .parents ('th') .addClass ('hide');
        let values_2 = [];
        let col_index_2 = [];
        // ① Get the value of the cell with the .hide class (I think)
        $('.hide'). each (function () {
            values_2.push ($(this));
        });
        //②. I want to get the index of the corresponding column with the hide class
        if (values_2) {
            $('thead tr'). children (). each (function (index, element) {
                if ($.inArray ($(element) .data ('selection'), values_2)! = -1) {
                    col_index_2.push (index);
                }
            });
            // Add hide class to the corresponding column for all rows
            $.each (col_index_2, function (index, value) {
                $('tr'). each (function () {
                    $(this) .children (). eq (value) .addClass ('hide');
                });
            });
        }
    });
});


I wanted to get the index of the corresponding column with col_index_2 in ②.
I didn't get anything in console.log.
At the time of ①, I don't know if I made a mistake or if I made a mistake from the beginning.

Thanks for your cooperation.

  • Answer # 1

    In that case.index ()You can get it at.
    The code can also be made simpler like this:

    $('.clm_close'). click (function () {
        let th = $(this) .closest ('th'),
            index = $('thead tr th'). index (th);
        th.addClass ('hide');
        $('tbody tr'). each (function () {
            $(this) .children ('td'). eq (index) .addClass ('hide');
        });
    });

    However, as the html structure is presentedthead,tbodyThe above works as expected on the assumption that the first column and the second and subsequent columns are different. what iftheadInside is everythingth,andtbodyInside is only the first rowthIn the second and subsequent rowstdIn that case, another measure is required.

    Also, although it has nothing to do with the main subject,$(function () {...}Is written repeatedly, but one$(function () {...}It is possible to put everything together in. That way the code will be cleaner.

Related articles