Home/ Questions/Q 3633368
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-19T00:38:39+00:00

I have an html file as below. <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN

  • 0

I have an html file as below. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
.style1 {
    background-color: #c3d9ff;
    font-family:arial,sans-serif;
}
.style2 {
    text-align: center;
    font-weight: bold;
}
.style3 {
    background-color: #FFFFFF;
    font-family:arial,sans-serif;
    text-align: center;
    font-weight: bold;
}
.style4 {
    background-color: #FFFFFF;
    font-family:arial,sans-serif;
    text-align: left;
}
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:15px;
background-color: ;
}
.action_button {
font-weight:bold;
float:right;
}
</style>
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script type="text/javascript">
$(function()
{
    $(".action_button").click(function()
    {
    var id = $(this).attr("id");
    var dataString = 'id='+ id ;
    var parent = $(this).parent().parent();
    $.ajax({
        type: "POST",
        url: "action.php",
        data: dataString,
        cache: false,
        success: function()
        {
            if(id % 2)
            {
                parent.fadeOut('fast', function() {$(this).fadeOut();$(this).fadeIn();});
            }
            else
            {
                parent.fadeOut('fast', function()   {$(this).fadeOut();$(this).fadeIn();});
            }
        }
    });
    return false;
    }
);});
$(document).ready(function() {
    $('.action_button').click(function() {
        $(this).text($(this).text() == 'Inactivate' ? 'Activate' : 'Inactivate');
        var $col5 = $(this).closest('tr').find('.clickme2');
        $col5.text( $col5.text() == 'Inactive' ? 'Active' : 'Inactive');
        return false;
    });
});
</script>
</head>
<body>
<table style="width: 90%" align="center" class="style1">
<tr>
        <td colspan="7" class="style2">MANAGER</td>
    </tr>
    <tr>
  <td class="style3" style="width: 139px">Col1</td>
  <td class="style3" style="width: 139px">Col2</td>
  <td class="style3" style="width: 139px">Col3</td>
  <td class="style3" style="width: 139px">Col4</td>
  <td class="style3" style="width: 139px">Col5</td>
  <td class="style3" style="width: 200px">Col6</td>
  <td class="style3" style="">Action</td>
 </tr>
</table>
<td id="main" class="main">
 <td class="update">
<table style="width: 90%" align="center" class="style1">
    <tr>
  <td class="style4" style="width: 139px">DataA1</td>
  <td class="style4" style="width: 139px">DataA2</td>
  <td class="style4" style="width: 139px">DataA3</td>
  <td class="style4" style="width: 139px">DataA4</td>
        <td class="style4 clickme2" style="width: 139px">Inactive</td>
  <td class="style4" style="width: 200px">DataA6</td>
   <td>
            <button href="#" id="DataA1" class="action_button" style="width:80px;height:">
            Activate</button>
            </td>
   </tr>
   <tr>
  <td class="style4" style="width: 139px">DataB1</td>
  <td class="style4" style="width: 139px">DataB2</td>
  <td class="style4" style="width: 139px">DataB3</td>
  <td class="style4" style="width: 139px">DataB4</td>
        <td class="style4 clickme2" style="width: 139px">Inactive</td>
  <td class="style4" style="width: 200px">DataB6</td>
   <td>
            <button href="#" id="DataA1" class="action_button" style="width:80px;height:">
            Activate</button>
            </td>
   </tr>
   <tr>
  <td class="style4" style="width: 139px">DataC1</td>
  <td class="style4" style="width: 139px">DataC2</td>
  <td class="style4" style="width: 139px">DataC3</td>
  <td class="style4" style="width: 139px">DataC4</td>
        <td class="style4 clickme2" style="width: 139px">Active</td>
  <td class="style4" style="width: 200px">DataC6</td>
   <td>
            <button href="#" id="DataA1" class="action_button" style="width:80px;height:">
            Inactivate</button>
            </td>
   </tr>
   <tr>
  <td class="style4" style="width: 139px">DataD1</td>
  <td class="style4" style="width: 139px">DataD2</td>
  <td class="style4" style="width: 139px">DataD3</td>
  <td class="style4" style="width: 139px">DataD4</td>
        <td class="style4 clickme2" style="width: 139px">Active</td>
  <td class="style4" style="width: 200px">DataD6</td>
   <td>
            <button href="#" id="DataA1" class="action_button" style="width:80px;height:">
            Inactivate</button>
            </td>
   </tr>
   <tr>
  <td class="style4" style="width: 139px">DataE1</td>
  <td class="style4" style="width: 139px">DataE2</td>
  <td class="style4" style="width: 139px">DataE3</td>
  <td class="style4" style="width: 139px">DataE4</td>
        <td class="style4 clickme2" style="width: 139px">Inactive</td>
  <td class="style4" style="width: 200px">DataE6</td>
   <td>
            <button href="#" id="DataA1" class="action_button" style="width:80px;height:">
            Activate</button>
            </td>
   </tr>
</table>
</td>
</td>
</body>
</html>

The page contains a table with a button at the end of each row. The button has function to change text (that is, when user click button, the text on the button and col5 swaps as pre-defined). Clicking “Activate” button changes the button text to “Inactivate” and col5 text to “Active”. Also, clicking “Inactivate” button changes the button text to “Activate” and col5 text to “Inactive”. But “Inactivate” button is not doing the stuff well.
The php file action.php is not relevant here because it is not printing anything.

Thanks in advance

blasteralfred 🙂

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    For the issue with the inactivate button use a trim with the text() function. i.e.

    $(document).ready(function() {
    $('.action_button').click(function() {
                 $(this).text($.trim($(this).text()) == 'Inactivate' ? 'Activate' : 'Inactivate');
        var $col5 = $(this).closest('tr').find('.clickme2');
        $col5.text( $.trim($col5.text()) == 'Inactive' ? 'Active' : 'Inactive');
        return false;
    });
});

    Also please note the correction mentioned by Jacob regarding reference to this.

    EDIT: Updated to use $.trim instead of String.trim

    • 0