Home/ Questions/Q 6568143
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T14:26:30+00:00

I’m trying to make the rows of this table start out disabled and then

  • 0

I’m trying to make the rows of this table start out disabled and then upon an edit button click, become active while also activating a confirm button at the end of each row. As far as I can tell the code is correct, upon the edit button being clicked, the fields do become active as does the confirm button. However the page instantaneously refreshes as well thus completely reversing the effect of the button. I can see the refresh button on my browser activating very briefly when I click the edit button. I have looked around for ages to try find out why this is occuring and there doesn’t seem to be anything that can help me.

The basic code is included below, I have basically stripped bits out down to this very basic model to try and work out what was going wrong but I have had no success yet.

<!DOCTYPE html>
<html dir="ltr" lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta charset=utf-8 />
<title>Table testing</title>

<script src="js/jquery.js"></script>

<script> 
//Add, edit, copy buttons

  $(document).ready(function(){

  $('.changerow').click(function() { 
  $('.' + this.id).attr('disabled', false);
  });

  $('.saverow').click(function() { 
    $('.' + this.id).attr('disabled', true);
  });
});
</script>

</head>


<body>

<div class="container">

<form id="leg">

<div id="details" class="sectionbar">
<p>Table tester</p>

</div>

<table class="rowsection">
<tr>
<th class="icon"></th>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
<th>Column 5</th>
<th class="icon"></th>

</tr><tr>
<td><button id="row1" width="16" height="16"  class="changerow row1"><img src="graphic/edit.png" width="16" height="16" alt="Edit"></button></td>
<td><input class="row1" placeholder="DHL123" disabled></td>
<td><input class="row1" placeholder="LHR" disabled></td>
<td><input class="row1" placeholder="Europe" disabled></td>
<td><input class="row1" placeholder="Yes" disabled></td>
<td><input class="row1" placeholder="DHL-EUR" disabled></td>
<td><button id="row1" width="16" height="16" class="saverow row1" disabled><img src="graphic/tick.gif" width="17" height="17" alt="Tick"></button><img src="graphic/cross.png" width="20" height="20" alt="Delete"></td>
</tr><tr>

<td><button id="row2" width="16" height="16"  class="changerow row2"><img src="graphic/edit.png" width="16" height="16" alt="Edit"></button></td>
<td><input class="row2" placeholder="DHL123" disabled></td>
<td><input class="row2" placeholder="LHR" disabled></td>
<td><input class="row2" placeholder="Europe" disabled></td>
<td><input class="row2" placeholder="Yes" disabled></td>
<td><input class="row2" placeholder="DHL-EUR" disabled></td>
<td><button id="row2" width="16" height="16"  class="saverow row2" disabled><img src="graphic/tick.gif" width="17" height="17" alt="Tick"></button><img src="graphic/cross.png" width="20" height="20" alt="Delete"></td>
</tr><tr>

<td><button id="row3" width="16" height="16"  class="changerow row3"><img src="graphic/edit.png" width="16" height="16" alt="Edit"></td>
<td><input class="row3" placeholder="DHL123" disabled></td>
<td><input class="row3" placeholder="LHR" disabled></td>
<td><input class="row3" placeholder="Europe" disabled></td>
<td><input class="row3" placeholder="Yes" disabled></td>
<td><input class="row3" placeholder="DHL-EUR" disabled></td>
<td><button id="row3" width="16" height="16"  class="saverow row3" disabled><img src="graphic/tick.gif" width="17" height="17" alt="Tick"></button><img src="graphic/cross.png" width="20" height="20" alt="Delete"></td>
</tr><tr>

<td><button id="rownew" width="16" height="16" class="changerow"><img src="graphic/add.png" width="20" height="20" alt="Add"></button></td>
<td><input class="rownew" name="legcode" type="text"></td>
<td><input class="rownew" name="legfrom" type="text"></td>
<td><input class="rownew" name="legto" type="text"></td>
<td><input class="rownew" type="checkbox" name="tracking" value="tracking">Track leg</td>
<td><input class="rownew" name="legcosts" type="text"></td>
<td class="icon"></td>
</tr>
</table>
 </div>
</body>
</html>

As the reply suggests I missed the return false off the end cause I was being a fool.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
      $(document).ready(function(){

  $('.changerow').click(function() { 
  $('.' + this.id).attr('disabled', false);return false;
  });

  $('.saverow').click(function() { 
    $('.' + this.id).attr('disabled', true);return false;
  });

    I am not that into jquery, but don’t you need to return false?

    • 0