zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    XCode
    容器中的诊断与分析4——live diagnosis——LTTng
    容器中的诊断与分析3——live diagnosis——lldb
    容器中的诊断与分析2——live diagnosis——perf
    容器中的诊断与分析1——简介
    HTTP之gRPC
    Markdown介绍
    目标指定法——S.M.A.R.T.
    Facebook token更新
    代理配置
  • 原文地址:https://www.cnblogs.com/Yuuuuu/p/6271157.html
Copyright © 2011-2022 走看看