Question 334479 in Html Question posted in
Some basic documentation can be found here.

Html – How to disable/enable the row in table with the same button?

In my table I have one buttons . In the table I want to disable/enable the entire row with the help of the same button. the button default is enable.
I want to each row all can enable/disable when click the button of the row .
When I click on ‘enable’ button the entire row color will change to red and the button value change to ‘disable’.
click again to the ‘disable’ button , thenthe entire row color recovery and the button value change to ‘enable’.
How to do it . Help needed.

part of my code :
jsfiddle

<table >
<tr>
    <th>Value1</td>
    <th>Value2</td>
    <th>
        <input type="button" value="enable" />
    </th>
</tr>
<tr>
    <th>Value3</td>
    <th>Value4</td>
    <th>
        <input type="button" value="enable" />
    </th>
</tr>
</table>
Tags:

5

Answers


  1. 0

    You could change the value of the button and then check if it’s ‘enable’ or ‘disable’

    Here’s the code:

    $('td input[type="button"]').on('click', function() {
    $(this).val((_, val) => val == "enable" ? "disable" : "enable");
    $(this).closest('tr').toggleClass('selected');
});
    .selected {
    background-color:red;
}
table {
    padding:0px;
    border-collapse: collapse;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<table>
    <tr>
        <td>Value1</td>
        <td>Value2</td>
        <td>
            <input type="button" value="enable" />
        </td>
    </tr>
    <tr>
        <td>Value3</td>
        <td>Value4</td>
        <td>
            <input type="button" value="enable" />
        </td>
    </tr>
</table>
    Login or Signup to reply.
  2. 0

    Here is my solution:

    var all_tr = $('tr');
var all_button = $('tr input[type="button"]');
$('td input[type="button"]').on('click', function() {
  let newValue;
  all_tr.removeClass('selected');
  if ($(this).val() === "disable") {
    newValue = "press";
  } else {
    newValue = "disable";
    $(this).closest('tr').addClass('selected');
  }
  all_button.val("press");
  $(this).val(newValue);
});
    .selected {
    background-color:red;
}
table {
    padding:0px;
    border-collapse: collapse;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<table>
    <tr>
        <td>Value1</td>
        <td>Value2</td>
        <td>
            <input type="button" value="press" />
        </td>
    </tr>
    <tr>
        <td>Value3</td>
        <td>Value4</td>
        <td>
            <input type="button" value="press" />
        </td>
    </tr>
</table>
    Login or Signup to reply.
  3. 0

    for changing the color you have to give the class name to the particular rows and in css give the by default color let’s say red color.

    To achieve this functionality you can use javascript and jquery.
    import the jquery in the script and write the function for toggling the button. This function that takes a button as a parameter. Inside the function, it uses jQuery to find the closest table row element to the clicked button.if the row has the class name which is given in the table then the class is removed and the button value is set to enable and vice versa.

    This script will called when the button is clicked and it toggles the appearance of the row and the button text based on the current state.

    Login or Signup to reply.
  4. 0

    The previous methods are probably better but here is another option if you use IDs for your rows or buttons.

    <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>JavaScript Tests</title>
    </head>
    <body>
        <table>
            <tr id="row_1">
                <td>Value1</td>
                <td>Value2</td>
                <td>
                    <input
                        type="button"
                        id="btn_1"
                        onclick="toggle(this.id)"
                        value="enable" />
                </td>
            </tr>
            <tr id="row_2">
                <td>Value3</td>
                <td>Value4</td>
                <td>
                    <input
                        type="button"
                        id="btn_2"
                        onclick="toggle(this.id)"
                        value="enable" />
                </td>
            </tr>
            <tr id="row_3">
                <td>Value5</td>
                <td>Value6</td>
                <td>
                    <input
                        type="button"
                        id="btn_3"
                        onclick="toggle(this.id)"
                        value="enable" />
                </td>
            </tr>
            <tr id="row_4">
                <td>Value7</td>
                <td>Value8</td>
                <td>
                    <input
                        type="button"
                        id="btn_4"
                        onclick="toggle(this.id)"
                        value="enable" />
                </td>
            </tr>
        </table>
    </body>
    <script>
        function toggle(e) {
            split_id = e.split("_");
            id = split_id[1];
            row = document.getElementById("row_" + id);
            btn = document.getElementById("btn_" + id);

            if (btn.value == "enable") {
                btn.value = "disable";
                var children = row.children;
                for (var i = 0; i < children.length; i++) {
                    var rowChild = children[i];
                    if (i <= children.length - 2) {
                        rowChild.style = "background-color: red";
                    }
                }
            } else {
                btn.value = "enable";
                var children = row.children;
                for (var i = 0; i < children.length; i++) {
                    var rowChild = children[i];
                    if (i <= children.length - 2) {
                        rowChild.style = "background-color: none";
                    }
                }
            }
        }
    </script>
</html>
    Login or Signup to reply.
  5. 0

    Try this !

    <!DOCTYPE html>
<html>
<head>
    <title>Toggle Row State</title>
    <style>
        .disabled {
            background-color: red;
        }
    </style>
</head>
<body>

<table id="myTable">
    <tr>
        <th>Value1</th>
        <th>Value2</th>
        <th>
            <input type="button" value="enable" onclick="toggleRowState(this)" />
        </th>
    </tr>
    <tr>
        <th>Value3</th>
        <th>Value4</th>
        <th>
            <input type="button" value="enable" onclick="toggleRowState(this)" />
        </th>
    </tr>
</table>

<script>
    function toggleRowState(button) {
        // Toggle the state based on the button's current value
        if (button.value === "enable") {
            button.value = "disable";
            // Set the row's background color to red
            button.closest("tr").classList.add("disabled");
        } else {
            button.value = "enable";
            // Remove the row's background color
            button.closest("tr").classList.remove("disabled");
        }
    }
</script>

</body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search