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

我可以添加详细信息，也可以删除。当我单击“删除”按钮时，表行是删除的，不在对象中；当我单击“删除”按钮时，详细信息也是在对象中删除；当我编辑特定行并提供“保存”选项时，我添加了“编辑和保存”按钮，新数据将显示在对象和表中

<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>")
}

添加详细信息
名称
字段1
费尔德2
NameItem1Item2Action
编辑详细信息
名称
项目1
项目2
.show{display:block}
.hide{显示：无}
.addDiv{位置：绝对；顶部：20px；左侧：20px；边框：1px实心#B6A6A6；背景色：#FFF；}
.表格{宽度：100%；边框：1px实心#B6A6A6；背景色：#FFF；}
.表td{边框：1px实心#B6A6A6；}；
.ed{位置：绝对；顶部：20px；左侧：20px；边框：1px实心35; B6A6A6；背景色：#FFF；}
$（“#adbut”）。单击（函数（）{
var nm=$（“#nm”）.val（）；
var f1=$（“#f1”）.val（）；
var f2=$（“#f2”）.val（）；
如果（nm&&nm！=“”）{
var nEmpObj={}
nEmpObj.name=nm；
nEmpObj.f1=f1；
nEmpObj.f2=f2；
fArr.push（nEmpObj）；
$（“#列表”）.append（constList（nEmpObj））；
$（“#列表”）.show（）；
$（“#添加”）.hide（）；
}
});
$（“#cbut”）。单击（函数（）{
$（“#添加”）.hide（）；
});
$（“#crt”）。单击（函数（）{
$（“#添加”）.show（）；
});
$（“#obj”）。单击（函数（）{
警报（JSON.stringify（fArr））；
});
$（'.del'）.live（'click'，function（）{
$（this.parent（）.parent（）.remove（）；
});
$（“#et”）.live（'click'，function（）{
变量名称=$（row.children（）.get（0））.text（），
item1=$（row.children（）.get（1））.text（），
item2=$（row.children（）.get（2））.text（）；
值=名称；
i1.值=项目1；
i2.值=项目2；
$（“#编辑”）.show（）；
});
$（“#cn”）。单击（函数（）{
$（“#编辑”）.hide（）；
});
函数get_data（）
{
}
var-fArr=[]；
var constList=函数（dta）{
返回$（“”+dta.name+“”+dta.f1+“”+dta.f2+“DeleteEdit”）
}

要想更好地使用已经实现了完整CRUD操作的jQuery插件，而不是再次发明轮子，请看一下jTable：

---

干杯，

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

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))
}

---

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

null

。

谢谢你，Saksham，我会把我的链接发送到现在为止。我想执行编辑和删除操作。我创建了对象，我可以存储值，若我按下empobj按钮，我可以在表和对象中看到我的记录，现在我想做编辑和删除相同的事情。如果单击“编辑并删除”按钮，该操作应在table和object@Saksham中执行，该操作运行良好，但只有table行得到的是delete而不是object中的delete。你们可以看到我的链接后删除行，当我点击empobj按钮，它显示删除data@Mahi删除后，当您使用我的更新方法时，对象也会被删除。@Mahi有帮助吗？？我修改了你们的提琴，删除对我来说很好。是的，它只是在表中得到删除，而不是在对象中

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