JQuery常用代码总结【持续更新】

1,获取表格当前行,的内容,如在当前行异步删除或修改时可用

当表格中存在异步操作时,可以通过jQuery得到当前行的数据,如下通过表格每一行的删除按钮删除数据库中此行所对应的数据。代码如下(只做示例)


<!--html-->
<tr>
    <td><input type ="hidden" class="rankID" value="1"></td>
    <td><input type = "text" class="rankName" value = "老板"></td>
    <td><input type = "button" class = "delete" value = "删除"></td>
</tr>
<tr>
    <td><input type ="hidden" class="rankID" value="2"></td>
    <td><input type = "text" class="rankName" value = "员工"></td>
    <td><input type = "button" class = "delete" value = "删除"></td>
</tr>
<!--省略一些-->
/***jQuery***/
//  拿到元素数组
var rankIDs = $(".rankID");
var rankNames = $(".rankName");
var deletes = $(".delete");

//  执行删除的点击事件,获取当前单击的行
$(".delete").click(function (){
    /* 获取当前点击的标签对象在该对象数组中的位置 */
    var index = updates.index($(this));
    //  获取当前位置所对应行隐藏域中的id内容,也可获取其他
    var rankID = rankIDs.eq(index).val();
    var rankName = rankNames.eq(index).val(); 
    /* 将获取到的信息异步提交给后台 */
    $.ajax({
        type:"post",
        url:"url",
        data:{
            type:"delete",
            rankID : rankID,
            rankName : rankName
        },
        success :function(rs){
            if(rs){
                alert("删除成功");
                /**可在此处写再次异步载入的表格信息函数***/
            }else if(!rs){
                alert("删除失败,请重试");
            }
        }
    });
});
IT文库 » JQuery常用代码总结【持续更新】
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址