禁用/启用表字段会导致页面刷新

发布于 2024-12-04 21:16:18 字数 4465 浏览 1 评论 0原文

我试图使该表的行开始禁用，然后在单击编辑按钮时变为活动状态，同时还激活每行末尾的确认按钮。据我所知，代码是正确的，单击编辑按钮后，这些字段会像确认按钮一样变为活动状态。然而，页面也会立即刷新，从而完全扭转按钮的效果。当我单击编辑按钮时，我可以看到浏览器上的刷新按钮非常短暂地激活。我已经环顾四周多年，试图找出为什么会发生这种情况，但似乎没有任何东西可以帮助我。

基本代码包含在下面，我基本上已经将一些部分剥离到这个非常基本的模型中，以尝试找出出了什么问题，但我还没有成功。

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

正如答复所表明的那样，我最终错过了返回错误，因为我是个傻瓜。

原文

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.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

倾城花音 2024-12-11 21:16:18

  $(document).ready(function(){

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

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

我不太喜欢 jquery，但是你不需要 return false 吗？

  $(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 原文

你又不是我 2024-12-11 21:16:18

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

如果您确实想要表单，那么您需要修改所有按钮。根据 HTML 规范 (http://www.w3.org/TR/html4/interact/forms.html#h-17.5)，button 元素默认为“提交”类型。实际上，你需要

<button type='button'/>

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

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.

回复收藏 0 原文

~没有更多了~