• JQuery动态操作表格


      新人,小白一枚,刚刚参加工作,所以会在这里记录一些遇到的问题。

      最近要做的东西,是对一个表格动态的添加行,删除行,并且对表格中内容进行非空验证。

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="scripts/jquery-1.10.2.js"></script>
    <script type="text/javascript">
    $(function () {
    //获取表格的行数
    var tabRowLen = $("table tbody tr").length;
    //点击add按钮时,
    $("#add").on("click", function () {
    //获取表格的行数
    tabRowLen = $("table tbody tr").length;
    var index = tabRowLen - 1;
    //表格行数为0时,或者表格不存在空值时
    if (IsNull(index) || tabRowLen == 0) {
    //添加一行
    $("table tbody").append("<tr>" +
    "<td><input type='text' class='Name'/><div id='dName" + tabRowLen + "'></div></td>" +
    "<td><input type='text' class='Age'/><div id='dAge" + tabRowLen + "'></div></td>" +
    "<td><input type='button' class='add' value='delete ' /></td></tr>");
    //删除一行
    $(".add").on("click", function () {
    $(this).parents("tr").remove();
    });
    }
    //keyup事件
    $("table input").on("keyup", function () {
    //验证是否有空值
    IsNull(index);
    });
    });
    
    function IsNull(trIndex) {
    var result = true;
    debugger;
    //遍历表格的input
    $("table tbody input").each(function (trIndex) {
    //判断是否存在空值
    if ($("table tbody input")[trIndex].value == "") {
    //提示空值
    result = false;
    $(this).next().html("required");
    }
    //不为空
    else {
    //清空提示信息
    $(this).next().html("");
    }
    });
    return result;
    };
    });
    </script>
    </head>
    <body>
    <table>
    <thead>
    <tr>
    <th>Name</th>
    <th>Age</th>
    <th><input type="button" id="add" value="addRow " /></th>
    </tr>
    </thead>
    <tbody></tbody>
    </table>
    </body>
    </html>
  • 相关阅读:
    【转】backtrack5工具之SQLMAP使用笔记(SQL注入用)
    httpd.conf配置详解
    【转】CodeBlocks+wxWidgets安装教程
    Windows下的Photoshop CS6快捷键
    backtrack常用渗透命令
    Codeforces Round #137 (Div. 2)
    Fedora 17 上安装 AMP 服务(Apache MySQL PHP)
    这几天用linux的体验
    EVO 4G 相机 照相 黑屏
    转载:qsort细节用法,double型的排序我竟然一直用错了~~~
  • 原文地址:https://www.cnblogs.com/Yuuuuu/p/6271157.html
Copyright © 2020-2023  润新知