项目中需要获取一个动态拼接的table中的数据,除了可以使用form表单的模式,这里尝试了一种新的方法。使用选择器获取数据。
table样式大概如下:
function getfrontTable(data) {
PJX++;//序列号累加
var num = data.indicators.length;
var table = "<div>"
+ "<table id='first" + PJX + "' cellspacing='0' class='valueTable' style='border:1px solid #e5ebe9'>"
+ "<tr id='firstTR' style='border:1px solid #e5ebe9'>"
+ "<td rowspan='"+ num +"' width='50px' style='border:1px solid #e5ebe9;text-align: center;'>" + PJX + "</td>"
+ "<td rowspan='"+ num +"' style='border:1px solid #e5ebe9;padding: 2px;'><textarea name='PJX' value=''>"+ data.item +"</textarea></td>"
+ "<td rowspan='"+ num +"' style='border:1px solid #e5ebe9;padding: 2px;'><textarea style='border:1px solid #e2e9e7;text-align: center;' name='PJXWeight' value=''>"+ data.weight +"</textarea></td>"
+ "<td style='border:1px solid #e5ebe9;padding: 2px;'><textarea name='PJXIndicator' value=''>"+ data.indicatorName +"</textarea></td>"
+ "<td style='border:1px solid #e5ebe9;padding: 2px;'><textarea style='border:1px solid #e2e9e7;text-align: center;' name='PJXIndicatorWeight' value=''>"+ data.indicatorWeight +"</textarea></td>"
+ "<td style='border: 1px solid #e5ebe9;' width='100px'><button style='background: #2dab9e; color: #fff;font-size: 12px;width: 40px;border-radius: 2px;' id='deleteRow' onClick='deleteRow(this)'>"
+ "删除</button> <button style='background: #2dab9e; color: #fff;font-size: 12px;width: 40px;border-radius: 2px;' id='addRow' onClick='addRow(this)'>添加</button></td>"
+ "</tr>";
return table;
}
通过调用这个getfrontTabel来获取凭借table。
获取数据的js代码。
var tables = $("table.valueTable");
获取到tables,这里使用的时table标签并且class为valueTable的。这里是担心页面其他部分有隐藏的table,项目使用的jqueryeasyui作为架子。
var trs = $(table).find("tr");
拿到每一行的数据。
var vals = $(tr).find("textarea");
拿到其中需要输入值得textarea的对象。
for (var j=0; j<vals.length; j++) {
flag = false;
var inputName = $(vals[j]).attr("name");
var inputVal = $(vals[j]).val();
通过遍历vals可以获取tr中所有的输入框的值和name
注意:
这里要注意,通过$(),获取的jquery对象。如果通过数组下表获取单个后,就会变成普通的对象。这里要注意,在使用jquery方法的时候比如val()时需要通过$()在转换一次。
$(vals[j]).attr("name");