Question

我可以添加详细信息并删除。当我点击删除按钮表行是删除而不是对象，我想当我点击删除按钮时，细节也在对象中删除，当我编辑特定行并给出保存选项时，我添加了编辑和保存按钮，新数据将显示在对象和表格中。

<div id="add" class="addDiv" style="display:none">
        <span>Add Details</span>
        <div><span>Name</span><input id="nm" type="text"/></div>
        <div><span>Field1</span><input id="f1" type="text"/></div>
        <div><span>Feild2</span><input id="f2" type="text"/></div>
            <div>
                <input id="adbut" type="button" value="Add"/>
                <input id="cbut" type="button" value="cancel"></input>
            </div>
    </div>

    <div>
        <input id="crt" type="button" value="create"/>
        <input id="obj" type="button" value="emp obj"/>
    </div>
    <div id="dtaListing">
        <table class="table">
            <tbody>
                <tr><td>Name</td><td>Item1</td><td>Item2</td><td>Action</td></tr>
            </tbody>
        </table>
        <table class="table" id="list" style="display:none">
            <tbody>

            </tbody>
        </table>
       </div>
    <div id="edit" class="ed" style="display:none">
        <span>Edit Details</span>
        <div><span>Name</span><input id="nam" type="text"/></div>
        <div><span>Item1</span><input id="i1" type="text"/></div>
        <div><span>Item2</span><input id="i2" type="text"/></div>
            <div>
                <input id="sv" type="button" value="Save"/>
                <input id="cn" type="button" value="cancel"></input>
            </div>
    </div>

    .show {display:block}
    .hide {display:none}
    .addDiv{position:absolute;top:20px;left:20px;border:1px solid #B6A6A6;background-color:#FFF;}
    .table{width:100%;border:1px solid #B6A6A6;background-color:#FFF;}
    .table td{border:1px solid #B6A6A6;};
    .ed{position:absolute;top:20px;left:20px;border:1px solid #B6A6A6;background-color:#FFF;}


$("#adbut").click(function(){
    var nm = $("#nm").val();
    var f1 = $("#f1").val();
    var f2 = $("#f2").val();
    if(nm && nm!=""){
        var nEmpObj = {}
        nEmpObj.name = nm;
        nEmpObj.f1 = f1;
        nEmpObj.f2 = f2;
        fArr.push(nEmpObj);
        $("#list").append(constList(nEmpObj));
        $("#list").show();
        $("#add").hide();
    }

 });

$("#cbut").click(function(){
    $("#add").hide();
});

$("#crt").click(function(){
    $("#add").show();
});
$("#obj").click(function(){
    alert(JSON.stringify(fArr));
});
$('.del').live('click',function(){
    $(this).parent().parent().remove();
});
$("#et").live('click',function(){
       var name=$(row.children().get(0)).text(),
        item1=$(row.children().get(1)).text(),
        item2=$(row.children().get(2)).text();
    nam.value=name;
    i1.value=item1;
    i2.value=item2;
          $("#edit").show(); 

});


$("#cn").click(function(){
    $("#edit").hide();
});
function get_data()
{

}
var fArr = [];

var constList = function(dta){
    return $("<tr><td>"+dta.name+"</td><td>"+dta.f1+"</td><td>"+dta.f2+"</td><td><button class  = del>Delete</button><button id = et >Edit</button></td></tr>")
}

Answer 1

你最好使用一个jQuery插件已经实现了完整的CRUD操作，而不是再次发明轮子，看看jTable：http://plugins.jquery.com/jTable/

干杯，

Answer 2

你可以像这样做一些事情。这只是你如何实现它的一瞥

var currentItemIndex = //Get it your way

for (var i = currentItemIndex;i<$("td:last").getIndex();i++) //getIndex is a custom method to return the index value of last item
{
    //increment index by accessing element as $(td:nth-child(i))
}

修改

将您的$('.del').live('click',function(){修改为：

$('#list .del').live('click',function(){ delete fArr[$(this).parent().parent().index()]; $(this).parent().parent().remove(); });

希望这能解决您的问题。 Google有很多解决方案可以从你的json对象中删除null。

如何使用jquery执行编辑和删除操作

2 个答案: