jquery选择器使用案例

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/wobuaizhi/article/details/82979625

项目中需要获取一个动态拼接的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");