jQuery 取的动态加载表格的行位置并删除

[Zoe_77]

代码中加//*****************的按钮实现删除该行的作用

var countPage;
var nowPag = 1;
var pageSize;
var countSize;

var starIndex;
var endIndex;

// 用户提交信息 
var name;
var sex;
var age;

// 定义行号 
var num = 1;



$(document).ready(function () {
    // 注册添加用户的事件 
    $("#submit").click(function () {
        // 获取用户提交的信息 
        name = $("#name").val();
        sex = $("input[name='sex']:checked").val();
        age = $("#age").val();
        pageSize = $("#selectSize option:selected").val();
        //alert(name+sex+age+pageSize); 


        // 创建表格下的tr对象 
        $tr = $("<tr class='data' ></tr>");
        $td1 = $("<td></td>");
        $td2 = $("<td></td>");
        $td3 = $("<td></td>");
        $td4 = $("<td></td>");
        $td5 = $("<td></td>");

        $tr.append($td1.append("<input type='checkbox' >"));
        $tr.append($td2.append(name));
        $tr.append($td3.append(sex));
        $tr.append($td4.append(age));
        $tr.append($td5.append("<input type='button' value='删除' onclick='pNation()'>"));//*****************

        $("#show").append($tr);
        pageNation();

    });

    

    // 注册选择显示条数的操作 
    $("#selectSize").change(function () {
        pageSize = $("#selectSize option:selected").val();
        pageNation();
    });

    // 注册分页操作的按钮点击事件 
    $("#first").click(pageNation);
    $("#back").click(pageNation);
    $("#next").click(pageNation);
    $("#last").click(pageNation);

    

});
function pNation() { //*****************
    
        $("table td").click(function () {
            var row = $(this).parent().index() + 1; // 行位置
            
            alert("当前位置：第" + row + "行")
        });
    
    //$(row_id).remove();
}

// 分页操作的函数 
var pageNation = function () {
    // 获取所有的数据条数 
    countSize = $("#show tr").size();
    // 获取总页数 
    countPage = Math.ceil(countSize / pageSize);

    // 处理翻页的操作 
    if (this.nodeType == 1) {
        var idValue = $(this).attr("id");
        if ("first" == idValue) {
            // alert(idValue); 
            nowPag = 1;
        } else if ("back" == idValue) {
            // alert(nowPag); 
            if (nowPag > 1) {
                nowPag--;
            }

        } else if ("next" == idValue) {
            // alert(idValue); 
            if (nowPag < countPage) {
                nowPag++;
            }
        } else if ("last" == idValue) {
            // alert(idValue); 
            nowPag = countPage;
        }

    }
    // alert(pageSize); 
    // 获取显示开始和结束的下标 
    starIndex = (nowPag - 1) * pageSize + 1;
    endIndex = nowPag * pageSize;

    if (endIndex > countSize) {
        // alert("下标大于总记录数"+endIndex); 
        endIndex = countSize;
    }

    if (countSize < pageSize) {
        // alert("总记录数小小于每页的显示条数"+endIndex); 
        endIndex = countSize;
    }

    // alert(starIndex); 

    if (starIndex == endIndex) {
        // 显示的操作 
        $("#show tr:eq(" + (starIndex - 1) + ")").show();
        $("#show tr:lt(" + (starIndex - 1) + ")").hide();
    } else {
        // 显示的操作 
        $("#show tr:gt(" + (starIndex - 1) + ")").show();
        $("#show tr:lt(" + (endIndex - 1) + ")").show();

        // 隐藏的操作 
        $("#show tr:lt(" + (starIndex - 1) + ")").hide();
        $("#show tr:gt(" + (endIndex - 1) + ")").hide();
    }
    // 改变底部显示操作 
    $("#sizeInfo")
    .html(
    "当前从" + starIndex + "条到第" + endIndex + "条记录,共" + countSize
    + "条记录.");
    $("#pageInfo").html("当前是第" + nowPag + "页,共" + countPage + "页.");
};

[以专业开发人员为伍]

学一种把 js 代码跟 html 代码分离的前端框架，可以更快更完整地看清 UI 模板，也可以解决许多 javascript 方面的诡异问题。 http://knockoutjs.com/examples/gridEditor.html

[以专业开发人员为伍]

你可以看到，首先，html 模板一目瞭让，不跟 javascript 大片代码纠结在一起。 然后，最主要地，mvvm 模式下你要操作界面，那么直接用非常轻灵的几条语句，那 ViewModel 数据稍微修改一下（例如 addGift、removeGift 等，只跟数据打交道），界面就自动改变了。 使用 mvvm 编程模式，你用不着到 pNation 中去纠结于 DOM，就干净且方便了。

[qq_17766193]

这么写简直太累了。建议去学习下x-jquery-tmpl

[zwl]

$(this).parent.remove() 楼主可以这样试试

[圣殿骑士18]

用过knockout，比使用jquery去创建删除节点方便多了。更好的比如vue，建议学。

==========
欢迎关注微信公众号 “产品技术知与行” ，打造全面的结构化知识库，包括原创文章、免费课程（C#，Java，Js）、技术专题、视野知识、源码下载等内容。
最新文章：解读经典《C#高级编程》 第四章之继承.接口 https://mp.weixin.qq.com/s/fO4C0WAYZUJYEvKJiBCuVA

[正怒月神]

删除操作里，打印一下$(this).parent()是什么 如果是td，那么就继续打印$(this).parent().parent(), 是tr,就可以$(this).parent().parent().remove()

[紫魂一号]

vue是个好东西。脚本只做一个事情，构造json对象。页面就只围着这个json对象做解析渲染。。