Dis/Enabling table fields causes page to refresh_问答_开发者

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.p开发者_StackOverflowng" 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.

  $(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?

That rogue form tag seems to be doing it; if you remove that (it's unclosed, anyway), the problem is resolved.

If you actually want the form, then you need to modify all of your buttons. Per the HTML Spec (http://www.w3.org/TR/html4/interact/forms.html#h-17.5), button elements default to 'submit' type. You need

<button type='button'/>

Actually, you have a whole bunch of unclosed tags in there; you should run this through a validator. Invalid HTML can cause all sorts of subtle bugs as browsers end up guessing what they are supposed to do.