使用jquery进行多行表格数据验证
生活随笔
收集整理的這篇文章主要介紹了
使用jquery进行多行表格数据验证
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
使用jquery進行多行表格數(shù)據(jù)驗證
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style>tr,td {font-family: Century Gothic;font-size: 16px;}</style><script src="jquery-1.12.1.js"></script><script>$(function(){$("#saveBtn").click(function(){var tableObj = $("#allDatas");// 獲取列標題var columnTitle = tableObj.find("th");var flag = true;var errMessge = "";// 數(shù)據(jù)校驗// console.log(tableObj);var trsData = tableObj.find("tr:gt(0)");var areaParams = [];trsData.each(function(row,trData){// console.log(row,trData);var inputsData = $(trData).find("td input"); // console.log(inputsData); var areaObj = {}; var array = []; inputsData.each(function(index,inputObj){// console.log(index,inputObj);// console.log(index,$(inputObj).val());array.push($(inputObj).val()); // 使用jquery進行多行表格數(shù)據(jù)驗證 });// console.log(array);var areaObj = {"areaName":array[0],"areaAddress":array[1]};// console.log(areaObj);areaParams.push(areaObj);});console.log(areaParams);});});</script> </head> <body> <table id="allDatas"><tr><!-- <th>選擇圖片</th> --><th>Area Name</th><th>Community Address</th><th>Operation</th></tr><tr><!-- <td><input type="file" name="imageFile1"/></td> --><td><input name="areaName" /></td><td><input name="areaAddress" /> </td><td><a href="javascript:;" onclick="deleteCurrentRow(this);"><font color='red'>Delete</font></a></td></tr></table> <input type="button" value="Add Row" onclick="javascript:addCurrentRow();"> <input type="button" value="Save" id="saveBtn"><script>function addCurrentRow(){var trcomp="<tr><td><input name='imageName'></input></td><td><input name='note' /></td><td><a href='javascript:;' onclick='deleteCurrentRow(this);'><font color='red'>Delete</font></a></td></tr>";$("#allDatas tr:last-child").after(trcomp);}function deleteCurrentRow(obj){var isDelete=confirm("Do you really want to delete it?");if(isDelete){var tr=obj.parentNode.parentNode;var tbody=tr.parentNode;tbody.removeChild(tr);}} </script> </body> </html>?
總結(jié)
以上是生活随笔為你收集整理的使用jquery进行多行表格数据验证的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 另一个绑定事件的方式 为元素绑定事件的区
- 下一篇： TestSMS