jquery获取动态添加的combobox已选中的text

时间:2022-12-09 18:00:36

本人easyui菜鸟,调试了一早上,api和百度都快翻烂了,终于试出来了。尼玛好简单我居然花了那么长时间。谨以此文勉励自己,也希望能帮到其他人。

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Accordion Actions - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="easyui.css">
	<link rel="stylesheet" type="text/css" href="icon.css">
	<link rel="stylesheet" type="text/css" href="/demo/demo.css">
	<script type="text/javascript" src="jquery.min.js"></script>
	<script type="text/javascript" src="jquery.easyui.min.js"></script>
</head>
<body>
	<input type="button" onclick="cal()" value="统计行数"/>
	<input type="button" onclick="print()" value="遍历人员"/>
	<table id="principal"  width="100%" border="0" cellspacing="1" cellpadding="0" style="background:#BED3DF;">
                       <thead>
						   <tr align="center">
							  <td width="20%">证件类型</td>
							  <td width="30%">身份证号码</td>
							  <td width="20%">姓名</td>	
							  <td width="30%">
								<img class="add" src="icons/edit_add.png" title="添加自定义主犯(嫌疑犯)"/>
							  </td>
						   </tr>
                       </thead>
					   <tbody>
							<tr class="addPrincipalTr">
								<td style="background:white;" align="center">
									<select name="cardType" class="easyui-combobox" id="sel" editable="false">
											<option value="1">身份证</option>
											<option value="2">学生证</option>
									</select>
								</td>
								<td style="background:white;" align="center"><input name="idCard" class="idCard" type="text" value="123243"/></td>
								<td style="background:white;" align="center"><input type="text" class="eventPeopleName" name="eventPeopleName" value="name"/></td>
								<td style="background:white;" align="center"><img class="" src="icons/pencil.png" title="请填写自定义主犯(嫌疑犯)"/></td>
							</tr>
					   </tbody>	
 					</table>
</body>
<script type="text/javascript">
$(".add").click(function(){
	addPrincipal();
	return true;
});

$(document).on('click', '.del', function(event){
    $(this).parent().parent().remove();
});

function cal(){
	var length = $("#principal").find("tr").length-1;
	alert(length);
}
var count = 2;
function addPrincipal(){			
	var trEl = [];
	//$('#principal tbody select').combobox({panelHeight:null,width:150});
	trEl.push('<tr class="addPrincipalTr">');
	trEl.push('<td style="background:white;" align="center">');
	trEl.push('<select name="cardType" class="easyui-combobox" editable="false">');
	trEl.push('<option value="1">身份证</option><option value="2">学生证</option></select></td>');
	trEl.push('<td style="background:white;" align="center"><input type="text" name="idCard" /></td>');
	trEl.push('<td style="background:white;" align="center"><input type="text" name="eventPeopleName" /></td>');
	trEl.push('<td style="background:white;" align="center">');         
	trEl.push('<img class="del" src="icons/edit_remove.png" title="删除自定义主犯(嫌疑犯)"/>');
	trEl.push('</td>');
	trEl.push('</tr>');
	$("#principal tbody").append(trEl.join(""));
	$.parser.parse($('#principal tbody'));
}

function print(){
	$('#principal tbody tr').each(function(){
		var cardType = $('select',this).combobox('getText');
		//var cardType = $('td', this).eq(1).find('option:selected').text();
		var card2 = $('td', this).eq(1);
		
		
		var idCard = $('input[name=idCard]',this).val();
		var name = $('input[name=eventPeopleName]',this).val();
		alert(name+"的"+cardType+"为:"+idCard);
	});
}
</script>