Question

我正在尝试禁用此表的行，然后在单击编辑按钮时激活，同时还激活每行末尾的确认按钮。据我所知，代码是正确的，单击编辑按钮后，字段会像确认按钮一样变为活动状态。然而，页面也会瞬间刷新，从而完全逆转按钮的效果。当我点击编辑按钮时，我可以看到浏览器上的刷新按钮非常短暂。我已经四处寻找，试着找出为什么会发生这种情况，而且似乎没有什么可以帮助我。

基本代码包含在下面，我已基本删除了这个非常基本的模型，试图弄清楚出了什么问题，但我还没有成功。

<!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>

由于回复表明我错过了最终的假回报，因为我是个傻瓜。

Answer 1

  $(document).ready(function(){

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

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

我不是那种jquery，但是你不需要返回false吗？

Answer 2

那个流氓form标签似乎正在这样做;如果你删除它（无论如何都是未封闭的），问题就解决了。

如果您实际上想要 form，那么您需要修改所有按钮。根据HTML规范（http://www.w3.org/TR/html4/interact/forms.html#h-17.5），button元素默认为＆＃39;提交＆＃39;类型。你需要

<button type='button'/>

实际上，你有一大堆未封闭的标签;你应该通过验证器来运行它。无效的HTML会导致各种微妙的错误，因为浏览器最终会猜测它们应该做什么。

Dis / Enabling表字段会导致页面刷新

2 个答案: