我有一个由php while循环生成的表。当单击编辑按钮时,我想替换一个字段(它将包含更新该记录的输入字段)。
对于第一行可以正常工作,但其他行都不能正常工作。我认为,每个php循环后,jquery必须被清除,但不确定这是如何做到的?
如果有人能看到我错过了一些明显的东西,那么请让我知道!
http://jsfiddle.net/QD564/1/几个行
的例子<tr>
<td>2014-06-13</td>
<td>23:00:00</td>
<td>WC</td>
<td>Chile v Australia</td>
<td style="text-align:center"><span id="12942">2 - 0</span><span id="e12942" style="display:none">aa</span>
</td>
<td style="text-align:center">-</td>
<td><span id="12942"><button id="showEdit" class="btn btn-sm btn-primary 12942" rel="12942">Edit</button></span><span id="e12942" style="display:none"><button id="hideEdit" class="btn btn-sm btn-danger 12942" rel="12942">Cancel</button></span>
</td>
</tr>
<tr>
<td>2014-06-13</td>
<td>20:00:00</td>
<td>WC</td>
<td>Spain v Holland</td>
<td style="text-align:center"><span id="12941">2 - 2</span><span id="e12941" style="display:none">aa</span>
</td>
<td style="text-align:center">-</td>
<td><span id="12941"><button id="showEdit" class="btn btn-sm btn-primary 12941" rel="12941">Edit</button></span><span id="e12941" style="display:none"><button id="hideEdit" class="btn btn-sm btn-danger 12941" rel="12941">Cancel</button></span>
</td>
</tr>
脚本 $("#showEdit").click(function() {
$("span#e"+$(this).attr('rel')).show();
$("span#"+$(this).attr('rel')).hide();
$("#showEdit."+$(this).attr('rel')).hide();
$("#hideEdit."+$(this).attr('rel')).show();
return false;
});
$("#hideEdit").click(function() {
$("span#e"+$(this).attr('rel')).hide();
$("span#"+$(this).attr('rel')).show();
$("#showEdit."+$(this).attr('rel')).show();
$("#hideEdit"+$(this).attr('rel')).hide();
return false;
});
感谢史蒂夫当你有多个重复的id时,jquery的id选择器将只抓取它可以在dom上找到的第一个id,这意味着如果你改变重复的id并使用一个类来代替,它可能会工作得更好:)
谢谢你的帮助。使用类才是前进的方向!!
<tr>
<td>2014-06-13</td>
<td>23:00:00</td>
<td>WC</td>
<td>Chile v Australia</td>
<td style="text-align:center">
<span class="12942" style="display: inline;">2 - 0</span>
<span class="e12942" style="display: none;">aa</span></td>
<td style="text-align:center"> - </td>
<td><span id="12942" style="display: inline;"><button id="" class="btn btn-sm btn-primary showEdit 12942" rel="12942">Edit</button></span><span id="e12942" style="display: none;"><button id="" class="btn btn-sm btn-danger hideEdit 12942" rel="12942">Cancel</button></span></td>
$(".showEdit").click(function() {
$("span#e"+$(this).attr('rel')).show();
$("span#"+$(this).attr('rel')).hide();
$("span."+$(this).attr('rel')).hide();
$("span.e"+$(this).attr('rel')).show();
return false;
});
$(".hideEdit").click(function() {
$("span#e"+$(this).attr('rel')).hide();
$("span#"+$(this).attr('rel')).show();
$("span."+$(this).attr('rel')).show();
$("span.e"+$(this).attr('rel')).hide();
return false;
});
更新了小提琴,以防它帮助其他人(如果他们整理它!)
http://jsfiddle.net/QD564/2/再次感谢你为我指明了正确的方向!