在项目中使用jq 保存数据,会根据Id获取指定的input,textarea,table中的数据。页面多的话,会比较麻烦,就封装了一个简单的js.请大家指教,感觉不是很成熟而且限制也不少,但是在我的项目中还是帮助我减少不少代码。下面贴代码
<div id="foot"> <div class="form-horizontal form-pd"> <div class="form-group"> <label for="" class="col-xs-2 control-label text-right">参数类型:</label> <div class="col-xs-9 "> <input type="text" class="form-control" name="ParameterID" placeholder="参数类型"> </div> </div> <div class="form-group"> <label for="" class="col-xs-2 control-label text-right">参数名称:</label> <div class="col-xs-9 "> <input type="text" class="form-control" name="ParameterName" placeholder="参数名称"> </div> </div> <div class="form-group"> <label for="" class="col-xs-2 control-label text-right">排序:</label> <div class="col-xs-9 "> <input type="number" class="form-control" name="Sort"> </div> </div> <div class="form-group"> <label for="" class="col-xs-2 control-label text-right">备注:</label> <div class="col-xs-9 "> <input type="text" class="form-control" placeholder="备注" name="Remark"> </div> </div> </div> </div> <table class="table table-bordered"id="tables"> <tr class="bg-cl"> <th>参数ID</th> <th>参数值</th> <th>备注</th> <th>操作</th> </tr> <tr> <td > <input type="text" style="width: 100%" name="data1"/> </td> <td > <input type="text" style="width: 100%" name="data2" /> </td> <td> <input type="text" style="width: 100%" name="data3" /> </td> <td style="text-align: center;" onclick="trDelete(this)"> <button type="button" class="btn btn-xs btn-danger">删除</button> </td> </tr> </table> <div> <button type="button" class="btn btn-xs btn-primary" onclick="trAdd()">添加</button> </div> <input type="button" name="savedata" id="test" value="提交"/>
下面是我封装的js,还请各位技术大牛多多指点
$(function () { FillData($("#foot"), $("#tables"), json); $("#test").click(function () { var root = $.extend(Gets($("#foot")), Gettable($("#tables"))); }); }); //增加表格行 function trAdd() { var table = $("#tables"); var str = "<tr>"; if (table.find('tr').length > 1) { str += table.find('tr').eq(1)[0].innerHTML; } else { str += table.find('tr').eq(0)[0].innerHTML; } str += "</tr>"; table.append(str); } //删除指定行 function trDelete(content) { var td = $(content); td.parents("tr").remove(); } //指定div 里面所有的input,textarea,raio,checkbox等。 function Gets(content) { try { var lRoot = new Object(); var field = content.find('input,textarea'); lRoot = CollectionInputData(field); return lRoot; } catch (e) { alert("抱歉,攻城狮正在攻城!"); } } //指定表格内的数据 function Gettable(content) { try { var lRoot = new Object(); var tabledata = new Array(); var tables = content.find("tr"); for (var i = 0; i < tables.length; i++) { var trDatas = new Object(); var tdData = tables.eq(i).find('td').find('input,textarea'); trDatas = CollectionInputData(tdData); if ($.isEmptyObject(trDatas)) continue; tabledata.push(trDatas); } lRoot["table"] = tabledata; return lRoot; } catch (e) { alert("抱歉,攻城狮正在攻城!"); } } //收集指定容器内输入框的数据 function CollectionInputData(content) { var root = new Object(); try { for (var j = 0; j < content.length; j++) { var myobject = new Object(); switch (content[j].type) { case "text": case "hidden": case "textarea": case "number": if (content[j].value != "" && content[j].value != undefined) { if (root[content[j].name]) { myobject[content[j].name] = content[j].value; } else { root[content[j].name] = content[j].value; } } break; case "radio": case "checkbox": root[content[j].name] = content[j].checked ? 1 : 0; break; default: break; } } return root; } catch (error) { alert("抱歉,攻城狮正在攻城!"); } }
优化的地方应该还有许多,但是在进一步完善。还请各位多多指点。