我有测试可能的方法来解决这个问题,但没有什么是真正好的解决方案。我需要 jeditable + 数据表用于其他显示。这就是为什么 jeditable 是强制性的。
我正在尝试在表(id、type、phone、default)上使用 jquery + jeditable 来执行以下操作:
- 添加行/删除行(如果 val 2 和 3 为空,则删除)
- 添加新行的编辑字段 1 和 2
HTML:
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<script src="http://www.appelsiini.net/download/jquery.jeditable.mini.js"></script>
<h4>Tél <button id="add-phone" class="btn btn-mini btn-primary" type="button"> + </button></h4>
<table border="1" width="80%">
<tr>
<th>id</th>
<th>Type</th>
<th>Tel</th>
<th></th>
</tr>
<tr>
<td>1</td>
<td class="dblclick">mob</td>
<td class="dblclick">0000000</td>
<td><input type="radio" name="1-tel-default" id="1-tel-default-1" value="1" /></td>
</tr>
<tr>
<td>2</td>
<td class="dblclick">mob</td>
<td class="dblclick">0000000</td>
<td><input type="radio" name="1-tel-default" id="1-tel-default-2" value="1" /></td>
</tr>
<tr>
<td>3</td>
<td class="dblclick">mob</td>
<td class="dblclick">0000000</td>
<td><input type="radio" name="1-tel-default" id="1-tel-default-3" value="1" /></td>
</tr>
</table>
Javascript:
$(document).ready(function(){
$(".dblclick").editable("http://www.appelsiini.net/projects/jeditable/php/echo.php", {
indicator : "Loading...",
submit: 'Ok',
cancel: 'Cancel',
tooltip : "Double-click for edit...",
event : "dblclick",
style : "inherit"
});
// trigger event when button is clicked
$("#add-phone").click(function()
{
//alert("click");
// add new row to table using addTableRow function
var clone = $("#phonelist tbody tr:last")
.clone()
.find('td')
.text('Edit')
.end()
.insertAfter("#phonelist tbody tr:last");
/*$('#phonelist tbody tr:last').after('<tr id="last" ><td class="dblclick">Editer</td><td class="dblclick">Editer</td><td><input type="radio" name="default" id="default-last" value="0"></td></tr>');*/
// prevent button redirecting to new page
return false;
});
});
这是我在 jsfiddle 上的可编辑测试:http: //jsfiddle.net/supersonique/ncHQ5/
谢谢你的帮助。