我对Jquery编码很新,我遇到了一个我无法弄清楚原因的问题:
我有一个包含按钮的表格,点击这些按钮后,用户可以编辑同一行的值:
<table border="1">
<tr>
<td>data1</td>
<td>data2</td>
<td>data3</td>
<td><input type="button" class="alter" value="Alter"></td>
</tr>
...
<tr>
<!-- Same structure as row above -->
</tr>
...
</table>
单击按钮时,我希望将相同的表行更改为:
<table border="1">
<tr>
<form action="" method="post">
<td><input type="hidden" name="editData1" value="data1">data1</td>
<td><input type="number" name="editData2" value="data2"></td>
<td><input type="number" name="editData3" value="data3"></td>
<td><input type="submit" name="editData" value="Edit"></td>
</form>
</tr>
...
<tr>
<!-- Remain unchanged -->
</tr>
...
</table>
我使用Jquery来做到这一点,你可以看到:
$(document).ready(function(){
$('.alter').click(function(){
var data1 = $(this).closest('tr').find('td:first').text();
var data2 = $(this).closest('tr').find('td:nth-child(2)').text();
var data3 = $(this).closest('tr').find('td:nth-child(3)').text();
$(this).closest('tr').html('<form action="" method="post"><td><input type="hidden" name="editData1" value="'+data1+'">'+data1+'</td><td><input type="number" name="editData2" value="'+data2+'"></td><td><input type="number" name="editData3" value="'+data3+'"></td><td><input type="submit" name="editData" value="Edit"></td></form>');
});
});
问题是:
当我单击Alter按钮时,Jquery会自动执行表格中的所有结构更改,插入表单,输入和提交按钮,但是当我尝试单击“编辑”按钮提交表单时,没有任何反应。
我甚至将jquery在tr标签之间插入的html复制到另一个页面并测试表单是否正在提交,并且一切正常!
任何人都可以帮我弄清楚为什么会这样吗?提前谢谢!
答案 0 :(得分:0)
在<form>
标记中包含<tr>
标记,然后其中包含<td>
个标记,这是无效的HTML。当您生成这些元素时,浏览器是智能的并在第一个td之前自动关闭表单,因此提交按钮不在表单中。
请改为尝试:
$(this).closest('tr').html('<td><form action="" method="post"><span><input type="hidden" name="editData1" value="'+data1+'">'+data1+'</span><span><input type="number" name="editData2" value="'+data2+'"></span><span><input type="number" name="editData3" value="'+data3+'"></span><span><input type="submit" name="editData" value="Edit"></span></form></td>')
你可能想要这样的CSS:
tr form span {
display:table-cell;
}