Question

我有测试方法可以做到这一点，但没有什么是真正的好解决方案。我需要jeditable + datatable用于其他显示。这就是为什么jeditable是强制性的。

我正在尝试在表（id，type，phone，default）上使用jquery + jeditable：

添加行/删除行（如果val 2＆amp; 3为空则删除）
编辑字段1＆amp;添加了新行的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/

感谢您的帮助。

Answer 1

如果值为2＆amp; 3是空白，尝试使用回调。在函数中，value是POST“http://www.appelsiini.net/projects/jeditable/php/echo.php”的返回值。因此，如果要删除行，请将其返回“删除”。此外，还必须在数据库/数据存储中进行删除。

$(".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",
    callback: function(value, setting) {
      if(value == "delete") $(this).parent().hide();
    }
});

您可能需要使用所使用的.parent（）函数的数量，具体取决于您点击的元素与行元素的嵌套程度。

另外，如果要添加要使用jeditable的新行，则不要在文档就绪时绑定jeditable，而是在文档单击时绑定它，这样每次单击新添加的行时都会有可编辑的行为绑定到它们

$(document).on('click', function() {
  // your jeditable stuff here
});

使用jquery + jeditable + bootstrap在表上添加可编辑的新行

1 个答案: