js动态生成表格

2019-06-26  本文已影响0人  java456

1、boday部分
<div >
<table id="InputsWrapper" border="1" >
<tr>
<th width="11%" >保险起期(年)</th>
<th width="11%" >保险止期(年)</th>
<th width="11%" >缴费起期(年)</th>
<th width="11%" >缴费止期(年)</th>
<th width="14%" >价值佣金系数(%)</th>
<th width="14%" >内部标保佣金系数(%)</th>
<th width="14%" >外部标保佣金系数(%)</th>
<th width="12%">操作</th>
</tr>
<tr >
<td ><input style=width:100px; type="text" id="insurancePeriodMin" name="insurancePeriodMin"placeholder="请输入保险起期" > </td>
<td ><input style=width:100px; type="text" id="insurancePeriodMax" name="insurancePeriodMax" placeholder="请输入保险止期" > </td>
<td ><input style=width:100px; type="text" id="renewPeriodMin" name="renewPeriodMin"placeholder="请输入缴费起期" > </td>
<td ><input style=width:100px; type="text" id="renewPeriodMax" name="renewPeriodMax" placeholder="请输入缴费止期" > </td>
<td ><input style=width:100px; type="text" id="valueCommissionCoefficient" name="valueCommissionCoefficient"placeholder="请输入价值佣金系数" > </td>
<td ><input style=width:100px; type="text" id="inStandardCommissionCoefficient" name="inStandardCommissionCoefficient" placeholder="请输入内部标保佣金系数" > </td>
<td ><input style=width:100px; type="text" id="outStandardCommissionCoefficient" name="outStandardCommissionCoefficient" placeholder="请输入外部标保佣金系数" > </td>
<td><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="AddMoreFileBox" class="btn btn-info">添加</a></td>
</tr>
</table>
</div>
2、js部分
/* remove and add */
(document).ready(function() { var MaxInputs = 8; //maximum input boxes allowed var InputsWrapper =("#InputsWrapper"); //Input boxes wrapper ID
var AddButton = ("#AddMoreFileBox"); //Add button ID var x = InputsWrapper.length; //initlal text box count var FieldCount=0; //to keep track of text box added var FieldCounts=1; var rowId=1;(AddButton).click(function (e) //on add input button click
{
if(x <= MaxInputs) //max input box allowed
{
FieldCount++; //text box added increment
FieldCounts++;
rowId++;
//add input box
(InputsWrapper).append('<tr id=tr'+ FieldCount +'><td> <input style=width:95px; type=\"text\" name=\"insurancePeriodMin\" id=\"insurancePeriodMin_'+ FieldCount +'\" value=\"a'+ FieldCount +'\"/></td><td> <input style=width:95px; type=\"text\" name=\"insurancePeriodMax\" id=\"insurancePeriodMax_'+ FieldCount +'\" value=\"b '+ FieldCount +'\"/></td> <td> <input style=width:95px; type=\"text\" name=\"renewPeriodMin\" id=\"renewPeriodMin_'+ FieldCount +'\" value=\"c '+ FieldCount +'\"/></td> <td> <input style=width:95px; type=\"text\" name=\"renewPeriodMax\" id=\"renewPeriodMax_'+ FieldCount +'\" value=\"d '+ FieldCount +'\"/></td><td> <input style=width:95px; type=\"text\" name=\"valueCommissionCoefficient\" id=\"valueCommissionCoefficient_'+ FieldCount +'\" value=\"e '+ FieldCount +'\"/></td><td> <input style=width:95px; type=\"text\" name=\"inStandardCommissionCoefficient\" id=\"inStandardCommissionCoefficient_'+ FieldCount +'\" value=\"f '+ FieldCount +'\"/></td><td> <input style=width:95px; type=\"text\" name=\"outStandardCommissionCoefficient\" id=\"outStandardCommissionCoefficient_'+ FieldCount +'\" value=\"g '+ FieldCount +'\"/></td><td><a href=\"#\" rel=\"external nofollow\" rel=\"external nofollow\" rel=\"external nofollow\" class=\"removeclass\"><input type=\"button\" value=\"删除\"></a></td><tr>'); x++; //text box increment } return false; });("body").on("click",".removeclass", function(e){ //user click on remove text
if( x > 1 ) {
$(this).parent().parent().remove(); //remove text box '<tr "'+ FieldCount +'">'
x--; //decrement textbox
}
return false;
})
});
3、效果图

图片.png
上一篇 下一篇

猜你喜欢

热点阅读