`
xinklabi
  • 浏览: 1564263 次
  • 性别: Icon_minigender_1
  • 来自: 吉林
文章分类
社区版块
存档分类
最新评论
收藏列表
标题 标签 来源
用Jquery实现Table行的显示和增删操作(带编号的自动更新) jquery table
<div >	
    <div class="form-item form-item-row form-item-row-tester">
        <div class="todo-tools">
        			<span class="">规避措施 <span class="ft-explain">(测试层面)</span></span>
				<a title="新增规避措施" id="tester_solution_add" class="pull-right solution_add"  href="javascript:void(0);">
                      <i class="icon-plus"></i> 新增
                </a>
        	</div>
        <div class="tester-solution-table">
        	<table id="tester_solution_table" class="table table-bordered table-striped table-members">
        	    <tr>
                <th style="width:5%;">编号</th>
                <th style="width:30%">措施描述</th>
                <th style="width:20%">责任人</th>
				<th style="width:12%">状态</th>
                <th style="width:12%">完成时间</th>
                <th style="width:6%">操作</th>
        	    </tr>
    			#if($!testerSolutions.size() != 0)
					 #set($t_count=1)
        			 #foreach($testerSolution in $!testerSolutions)
                       <tr>
        				<td class="ft-center ft-middle">
							<span>#$t_count</span><input type="hidden" name="solutionId" value="$testerSolution.id" /><input type="hidden" name="solutionType" value="test"/>
        				</td>
            			<td>
							<textarea id="solutionTesterDescModify$testerSolution.id" name="solutionDesc" minlength="2" maxlength="500" class="required form-text" rows="1">$testerSolution.description</textarea>
                        </td>
						<td>
            				 <input id="solutionTesterOwnerIdModify$testerSolution.id" name="solutionOwnerId" type="text" data-search-user="simple" value='{"id":$testerSolution.ownerId,"realName":"$testerSolution.owner.realName","nickName":"$testerSolution.owner.nickName"}' class="form-control required"/>
            			</td>
            			<td>
							<select name="solutionStatus">
								#foreach($solutionStatus in $solutionStatuses.entrySet())
								<option value="$solutionStatus.key" #if($testerSolution.status==$solutionStatus.key) selected='true' #end >$solutionStatus.value</option>
								#end
							</select>
            			</td>
            			
            			<td>
            				<input id="solutionTesterEndedAtModify$testerSolution.id" name="solutionEndedAt" type="text" class="required form-text"  value="$!dateUtils.format("yyyy-MM-dd",$testerSolution.endedAt)" onFocus="WdatePicker({dateFmt:'yyyy-MM-dd',minDate:'%y-%M-#{%d}'})"/>
            			</td>
            			<td class="ft-center ft-middle">
            				<a class="solution_remove" onclick="onSolutionRemove(this);" href="javascript:void(0);" title="删除"><i class="icon-trash"></i></a>
            			</td>
    				   </tr>
					   #set($t_count=$t_count+1)
    				 #end
    				#end
        	</table>
        </div>
    </div>
	
	<div class="form-item form-item-row form-item-row-dever">
        	<div class="todo-tools">
    			<span class="">规避措施 <span class="ft-explain">(开发层面)</span></span>
			<a title="新增规避措施" id="dever_solution_add" class="pull-right solution_add"  href="javascript:void(0);">
                  <i class="icon-plus"></i> 新增
            </a>
        	</div>
        <div class="dever-solution-table">
        	<table id="dever_solution_table" class="table table-bordered table-striped table-members">
        	    <tr>
        	        <th style="width:5%;">编号</th>
                <th style="width:30%">措施描述</th>
                <th style="width:20%">责任人</th>
				<th style="width:12%">状态</th>
                <th style="width:12%">完成时间</th>
                <th style="width:6%">操作</th>
        	    </tr>
    			#if($!deverSolutions.size() != 0)
					 #set($d_count=1)
        			 #foreach($deverSolution in $!deverSolutions)
                       <tr>
        				<td class="ft-center ft-middle">
							<span>#$d_count</span><input type="hidden" name="solutionId" value="$deverSolution.id" /><input type="hidden" name="solutionType" value="dev"/>
        				</td>
            			<td>
							<textarea id="solutionDeverDescModify$deverSolution.id" name="solutionDesc" minlength="2" maxlength="500" class="required form-text" rows="1">$deverSolution.description</textarea>
                        </td>
						<td>
            				 <input id="solutionDeverOwnderIdModify$deverSolution.id" name="solutionOwnerId" type="text" data-search-user="simple" value='{"id":$deverSolution.ownerId,"realName":"$deverSolution.owner.realName","nickName":"$deverSolution.owner.nickName"}' class="form-control required"/>
            			</td>
            			<td>
							<select name="solutionStatus">
								#foreach($solutionStatus in $solutionStatuses.entrySet())
								<option value="$solutionStatus.key" #if($deverSolution.status==$solutionStatus.key) selected='true' #end >$solutionStatus.value</option>
								#end
							</select>
            			</td>
            			
            			<td>
            				<input id="solutionDeverEndedAtModify$deverSolution.id" name="solutionEndedAt" type="text" class="required form-text"  value="$!dateUtils.format("yyyy-MM-dd",$deverSolution.endedAt)" onFocus="WdatePicker({dateFmt:'yyyy-MM-dd',minDate:'%y-%M-#{%d}'})"/>
            			</td>
            			<td class="ft-center ft-middle">
            				<a class="solution_remove" onclick="onSolutionRemove(this);" href="javascript:void(0);" title="删除"><i class="icon-trash"></i></a>
            			</td>
    				   </tr>
					   #set($d_count=$d_count+1)
    				 #end
    				#end
        	</table>
        </div>
    </div>
 </div>

<script type="text/javascript">

var index = 0;

var onSolutionRemove = function(e){
	var tr = $(e).parent().parent();
	var tbl_id = $(tr).parent().parent().attr("id");
	tr.remove();
	updateNumber(tbl_id);
}

var updateNumber = function(tbl_id){
	var tr_count = $("#" + tbl_id +" tr").size();
	for(var i = 1; i < tr_count; i++){
    	var span = $("#" + tbl_id+" tr:eq(" + i +") td:eq(0) span");
    		span.html("#"+i);
    }	
}
   
$(".solution_add").click(function(e) {
    var tr_html = "";
    var type = "";
    var idKey = "";
    var ele_id = $(this).attr("id");
    if(ele_id.indexOf("tester") != -1){
    	type = "test";
    }else if(ele_id.indexOf("dever") != -1){
    	type = "dev";
    }
	
    tr_html += "<tr>";
	tr_html += "<td class=\"ft-center ft-middle\"><span></span><input type=\"hidden\" name=\"solutionId\" value=\"null\" /><input type=\"hidden\" name=\"solutionType\" value=\"" + type + "\" /></td>";
	tr_html += "<td><textarea id='solution" + type + "DescAdd" + index + "' name=\"solutionDesc\" minlength=\"2\" maxlength=\"500\" class=\"required form-text\" rows=\"1\"></textarea></td>";
	tr_html += "<td><input id='solution" + type + "OwnerIdAdd" + index + "' name=\"solutionOwnerId\" type=\"text\" data-search-user=\"simple\" value=\"\" class=\"form-control required\"/></td>";
	tr_html += "<td><select name=\"solutionStatus\">";
                      #foreach($solutionStatus in $solutionStatuses.entrySet())
                      tr_html += "<option value=\"$solutionStatus.key\">$solutionStatus.value</option>";
                      #end
                tr_html += "</select></td>";
	tr_html += "<td><input id='solution" + type + "EndedAtAdd" + index + "' name=\"solutionEndedAt\" type=\"text\" class=\"required form-text\"  onFocus=\"WdatePicker({dateFmt:'yyyy-MM-dd',minDate:'%y-%M-#{%d}'})\"/></td>";
	tr_html += "<td class='ft-center ft-middle'><a class=\"solution_remove\" onclick=\"onSolutionRemove(this);\" href=\"javascript:void(0);\" title=\"删除\"><i class=\"icon-trash\"></i></a></td>";
	tr_html += "</tr>";
	
	index++;
	
	var row = $(tr_html);
	
	console.log(row);
	
	if(type == "test"){
		$("#tester_solution_table").append(row);
		updateNumber("tester_solution_table");
	}else if(type == "dev"){
		$("#dever_solution_table").append(row);
		updateNumber("dever_solution_table");
	}
	
	$("input[name='solutionOwnerId']", row).searchUser();
    $("select[name='solutionStatus']", row).not("[data-select='original']").select2();
});

</script>
Global site tag (gtag.js) - Google Analytics