JQuery動態動作表格

來源:互聯網
上載者:User

標籤:pen   org   doc   type   char   null   rem   set   ack   

  新人,小白一枚,剛剛參加工作,所以會在這裡記錄一些遇到的問題。

  最近要做的東西,是對一個表格動態添加行,刪除行,並且對錶格中內容進行非空驗證。

<!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>

 

JQuery動態動作表格

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.