Specific row for table click event disable and enable jquery

Question

For security specific row with condition need to disable click event. Table is being loaded by ajax callback. But need to disable specific row. Here is the sample code that doesn't working.

 <table id="result-table" class="table table-striped table-bordered tbl-paper-theme table-paper" role="grid" aria-describedby="datatable_info">

    <thead>
        <tr>
            <th>
                Item
            </th>
            <th>
                Qty
            </th>
            <th>
                Price
            </th>
            <th>
                Amount
            </th>
            <th>
                Action
            </th>
        </tr>

    </thead>
    <tbody id="result-tbody">
        <tr>
            <td>Mushroom Soup</td>
            <td>1</td>
            <td>180</td>
            <td>180.00</td>
            <td>
                <div class="row-action pull-left">
                    <div class="btn-group">
                        <button class="btn btn-danger btn-sm ordered-qty-del" id="421" title="Del"><i class="icon-remove"></i></button>
                    </div>
                </div>
            </td>
        </tr>
        <tr>
            <td>Caesar's Salad (Larg)</td>
            <td>1</td>
            <td>345</td>
            <td>345.00</td>
            <td>
                <div class="row-action pull-left">
                    <div class="btn-group">
                        <button class="btn btn-danger btn-sm ordered-qty-del" id="480" title="Del"><i class="icon-remove"></i></button>
                    </div>
                </div>
            </td>
        </tr>
    </tbody>
</table>

For specific row I mean row number two I have tried to disable by given below code like : datatable is loaded dynamically by ajax $("#result-table result-tbody tr:eq(1)").prop('disabled', true);

https://stackoverflow.com/questions/7899453/how-to-disable-and-enable-html-table-using-javascript — toor, Mar 14 '18 at 06:28

Suresh Ponnukalai · Answer 1 · 2018-03-14T07:08:25.167

<tr> does not have any property called disabled. If you want to hide the row, you have to apply the display property none to the element like below.

$("#result-table #result-tbody tr:eq(1)").css("display","none");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="result-table" class="table table-striped table-bordered tbl-paper-theme table-paper" role="grid" aria-describedby="datatable_info">

    <thead>
        <tr>
            <th>
                Item
            </th>
            <th>
                Qty
            </th>
            <th>
                Price
            </th>
            <th>
                Amount
            </th>
            <th>
                Action
            </th>
        </tr>

    </thead>
    <tbody id="result-tbody">
        <tr>
            <td>Mushroom Soup</td>
            <td>1</td>
            <td>180</td>
            <td>180.00</td>
            <td>
                <div class="row-action pull-left">
                    <div class="btn-group">
                        <button class="btn btn-danger btn-sm ordered-qty-del" id="421" title="Del"><i class="icon-remove"></i></button>
                    </div>
                </div>
            </td>
        </tr>
        <tr>
            <td>Caesar's Salad (Larg)</td>
            <td>1</td>
            <td>345</td>
            <td>345.00</td>
            <td>
                <div class="row-action pull-left">
                    <div class="btn-group">
                        <button class="btn btn-danger btn-sm ordered-qty-del" id="480" title="Del"><i class="icon-remove"></i></button>
                    </div>
                </div>
            </td>
        </tr>
    </tbody>
</table>

EDIT:

You don't want to hide the rows but you want to disabled click event on the elements for the specific row, then you can use the following code.

$("#result-table #result-tbody tr:eq(0)").find("*").prop("disabled", "disabled");

The above code will disabled all the elements inside the first row(input, select, button, textarea....). eq(0) will target the first row of the table. Look at the following snippet, I have added the click event on both the rows, but for the first one we have disabled it using jquery.

$("#result-table #result-tbody tr:eq(0)").find("*").prop("disabled", "disabled");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="result-table" class="table table-striped table-bordered tbl-paper-theme table-paper" role="grid" aria-describedby="datatable_info">

    <thead>
        <tr>
            <th>
                Item
            </th>
            <th>
                Qty
            </th>
            <th>
                Price
            </th>
            <th>
                Amount
            </th>
            <th>
                Action
            </th>
        </tr>

    </thead>
    <tbody id="result-tbody">
        <tr>
            <td>Mushroom Soup</td>
            <td>1</td>
            <td>180</td>
            <td>180.00</td>
            <td>
                <div class="row-action pull-left">
                    <div class="btn-group">
                        <button class="btn btn-danger btn-sm ordered-qty-del" id="421" onclick="alert('test one');" title="Del"><i class="icon-remove"></i>One</button>
                    </div>
                </div>
            </td>
        </tr>
        <tr>
            <td>Caesar's Salad (Larg)</td>
            <td>1</td>
            <td>345</td>
            <td>345.00</td>
            <td>
                <div class="row-action pull-left">
                    <div class="btn-group">
                        <button onclick="alert('test two');" class="btn btn-danger btn-sm ordered-qty-del" id="480" title="Del"><i class="icon-remove"></i>Two</button>
                    </div>
                </div>
            </td>
        </tr>
    </tbody>
</table>

no i don't want to hide/show. i want to click event disable/enable on specific row. how can i do that. thanks for ur reply. — python gbs, Mar 14 '18 at 06:31

score 0 · Answer 2 · answered Mar 14 '18 at 06:33

0

We can do this in css. Try the following code

#result-tbody tr:nth-child(2) {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
}

Above code will block the entire tr. If you want to block certain elements inside the tr go on with appropriate selectors.

answered Mar 14 '18 at 06:33

sethuraman

187
7

thanks for ur reply. but it has to be dynamic for some condition basis so i can't do that. like say if a condition arise row 1 has to be clickable but others not. in that case what can i do? i wanna control it by dynamic. – python gbs Mar 14 '18 at 06:38
you can add a classname to that row and add the css to that class. – sethuraman Mar 14 '18 at 12:54

Specific row for table click event disable and enable jquery

2 Answers2