动态添加table的行和删除最后一行

    ①按钮

<table>
        <tr>
            <td style="background-color:#0066cc;color:white;">
            <span οnclick="addLinkMan(this);" style="cursor: pointer;display: block;width:80px;height:20px;text-align: center"><i class="fa fa-plus" style="margin-top:4px">继续添加</i></span>
            </td>
            <td style="padding-left:30px">
                <span οnclick="delLinkMan(this);" style="background-color:red;color:white;cursor: pointer;display: block;height:20px;"><i class="fa fa-remove" style="margin-top:4px">删除</i></span></td>
         <td  style="color:red">
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*供应商提供多个行业类型时,分别添加其行业类别对应的参数定义内容    
         </td>
        </tr>

    </table>

  ②要添加的行

<tr id="addColumn" class="allDevice tabFirst tabDel" style="height:35px">
<td style="border:1px solid black;">
    <input type="text" style="width: 62px;border:none" name="appName" id="appName" required>
            <select dir="rtl" id="appName2" style="width: 10px;" οnchange="isSelected(this)">
    <option>---请选择---</option>
    <c:forEach var="typeItem"  items="${appNameMap}">
    <option value="${typeItem.key}">${typeItem.key}</option>
    </c:forEach>
    </select>
</td>
<td style="border:1px solid black;"><input type="text" style="width: 100px;border:none" name="appId" id="appId" required=true></td>
<td style="border:1px solid black;"><input type="text" style="width: 60px;border:none" name="produceModel" id="produceModel"></td>
<td style="border:1px solid black;">
 <select name="trueOrFalse" style="width:100px" editable="true">
<c:forEach var="typeItem2" items="${trueOrFalseMap}">
<option value="${typeItem2.value}">${typeItem2.key}</option>
</c:forEach>
 </select>
</td>
<td style="border:1px solid black;"><input type="text" style="width: 60px;border:none" name="firmwareVersion" id="firmwareVersion"></td>
 <td style="border:1px solid black;"><input type="text" style="width: 60px;border:none" name="upRate" id="upRate"></td>
<td style="border:1px solid black;"><input type="text" style="width: 60px;border:none" name="takeSampleRate" id="takeSampleRate"></td>
                    <td style="border:1px solid black;"><input type="text" style="width: 60px;border:none" name="checkRate" id="checkRate"></td>
                    <td style="border:1px solid black;"><input type="text" style="width: 60px;border:none" name="baterythreshold" id="baterythreshold"></td>
                    <td style="border:1px solid black;"><input type="text" style="width: 100px;border:none" name="urgTakeSampleRate" id="urgTakeSampleRate"></td>
                    <td style="border:1px solid black;"><input type="text" style="width: 100px;border:none" name="urgUpRate" id="urgUpRate"></td>
                    <td style="border:1px solid black;"><input type="text" style="width: 100px;border:none" name="remark" id="remark"></td>

</tr>

③js控制

var addColumn=$("#addColumn");
var trueOrFalse_hidden=$("#trueOrFalse_hidden_div");
var addLinkMan = function (e) {
    var $addLinkMan = $(
    '<tr class="allDevice tabFirst tabDel" style="height:35px">'+addColumn.html()+' </tr>'
    );
    $(".tabFirst:last").after($addLinkMan);
};

var delLinkMan = function (e) {
    var $tr =$(".tabDel:last");
    $tr.remove();
};

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值