easyUI

效果图

html

<div id="area_form">
	<form id="form_amc_stakeholder_repayment_associator" class="form">
		<table>
			<tr>
				<td align="right">
				<label for='debtor_name'>所属债务人名称：</label>
				</td>
				<td>
				<input type='text' id='debtor_name' name='debtor_name' class='easyui-validatebox' data-options='required:false' style='height:26px;width:231px'/>
				</td>
				<td align="right">
				<label for='package_id'>所属资产包：</label>
				</td>
				<td>
				<input type='text' id='package_id' name='package_id' readonly class='easyui-combobox' data-options='required:false' style='height:26px;width:231px'/>
				</td>
			</tr>
			<tr>
				<td align="center">
				            
				<label for='relator_name'>担保人名称：</label>
				</td>
				<td>
				<input type='text' id='relator_name' name='relator_name' class='easyui-validatebox' data-options='required:false' style='height:26px;width:231px;'/>
				</td>
				<td align="right">
					<label for='debtor_type'>担保人属性：</label>
				</td>
				<td>
					<input type='text' id='debtor_type' name='debtor_type' readonly class='easyui-combobox' data-options='required:false' style='height:26px;width:231px'/>
				</td>
			</tr>
		</table>
		<table id='repayment_info' style='text-align: center; border-collapse: collapse; padding:2px;width: 98%' border="1px solid ;">
			<tr style='height: 25px'>
				<td align='center' width=10%><label>笔数</label></td>
				<td align='center' width=25%><label>还款人</label></td>
				<td align='center' width=25%><label>还款时间</label></td>
				<td align='center' width=25%><label>还款金额(元)</label></td>
				<td align='center' width=15%><label>操作</label></td>

			</tr>
			<tr id='end_tr'>
				<td colspan="5"align="right" style="border-color: white;">
					<a id="btn_add" href="#" class="easyui-linkbutton" iconCls="icon-add">添加</a>
				</td>
			</tr>

		</table>
	</form>
		<div id="icon"></div>
	</div>
	<div class="button-section">
		<a id="btn_save" href="#" class="easyui-linkbutton" iconCls="icon-ok">确定</a>
		<a id="btn_cancel" href="#" class="easyui-linkbutton" iconCls="icon-cancel">取消</a>
	</div>

js

     

function add_tb(length) {
    var number_of_pens=tableRowsCount("#repayment_info")-1;
    var index=tr_count-1;
    var repaid_person = $('#repaid_person').val();
    if(length == undefined){
        $('#end_tr').before(
            "<tr style='height: 25px' id='tr_"+index+"'>" +
            "<td align='center'>"+number_of_pens+"</td>" +
            "<td align='center'><input type='text' class='easyui-validatebox' data-options='required:true' style='width: 100px;height: 25px' name='repaid_person' id='repaid_person"+index+"'/></td>" +
            "<td align='center'><input type='text' class='easyui-datebox' data-options='required:true' style='width: 100px;height: 25px' name='repayment_time' id='repayment_time"+index+"'/></td>" +
            "<td align='center'><input type='text' class='easyui-validatebox' data-options='required:true' style='width: 100px;height: 25px' οnkeyup='clearNoNum(this)' name='repayment_amount' id='repayment_amount"+index+"'/></td>" +
            "<td align='center'><a id='btn_delete"+index+"' href='#' class='easyui-linkbutton' iconCls='icon-remove' οnclick='del_tb(this)'>删除</a></td>" +
            "</tr>"
        );
    }else{
        $('#end_tr').before(
            "<tr style='height: 25px' id='tr_"+index+"'>" +
            "<td align='center'>"+number_of_pens+"</td>" +
            "<td align='center'><input type='text' class='easyui-validatebox' style='width: 100px;height: 25px' style='width: 70px' readonly name='repaid_person' id='repaid_person"+index+"'/></td>" +
            "<td align='center'><input type='text' class='easyui-datebox' data-options='required:true'  style='width: 100px;height: 25px' readonly name='repayment_time' id='repayment_time"+index+"'/></td>" +
            "<td align='center'><input type='text' class='easyui-validatebox'  style='width: 100px;height: 25px' name='repayment_amount' readonly id='repayment_amount"+index+"'/></td>" +
            "<td align='center'></td>" +
            "</tr>"
        );
    }

    $.parser.parse("#tr_"+index);
    tr_count++;
    var date = new Date();
    var seperator1 = "-";
    var year = date.getFullYear();
    var month = date.getMonth() + 1;
    var strDate = date.getDate();
    if (month >= 1 && month <= 9) {
        month = "0" + month;
    }
    if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
    }
    var currentdate = year + seperator1 + month + seperator1 + strDate;
    $('#repayment_time'+index).datebox('setValue', currentdate);
}


function del_tb(obj) {
    var index=$(obj).closest("tr").index();
    var max_line_num=tableRowsCount('#repayment_info');
    if(index==max_line_num){
        $(obj).parent().parent().remove();
    }else{
        $(obj).parent().parent().remove();
        var goods_info =[];
        var cols=tableColsCount('#repayment_info',0);
        var new_line_num=tableRowsCount('#repayment_info');
        for(var i=3;i<new_line_num-1;i++){
            var tr =  $('#repayment_info').find("tr").eq(i);//
            var tds = tr.children();
            $(tds[0]).html(i);
            var temp_tr_id = $(tr).attr('id').split('_');
            if(temp_tr_id.length==2){
                var new_tr_id;
                new_tr_id=temp_tr_id[0]+'_'+i;
                $(tr).attr('id',new_tr_id);
            }
        }
    }
}
function tableRowsCount(tableId){
    var count=$(tableId).find("tr").length;
    return count;
}
function tableColsCount(tableId,index){
    var count=$(tableId).find("tr").eq(index).find("td").length;
    return count;
}