使用jQuery增加table中的tr行,详见正文图示
博客专区 > xjcyxyx 的博客 > 博客详情
使用jQuery增加table中的tr行,详见正文图示
xjcyxyx 发表于4年前
使用jQuery增加table中的tr行,详见正文图示
  • 发表于 4年前
  • 阅读 156
  • 收藏 0
  • 点赞 0
  • 评论 0

移动开发云端新模式探索实践 >>>   

一、实现效果

    1、增加前

    2、增加后

二,实现代码

    1、html

<table>
   <thead>
    <tr>
     <th>字段类型</th>
     <th>字段名称</th>
     <th>初始内容</th>
     <th>操作</th>
    </tr>
   </thead>
   <tbody class="singlebody">
    <tr class="ttr trtxt">
     <td>增加的内容<span class="numtrtxt">1</span></td>
     <td><input type="text" name="txt[]" id="txt1" value="" /></td>
     <td><input type="text" name="value[]" id="value1" value="" /></td>
     <td><a class="btnGrayS vm">添加</a>&nbsp;&nbsp;<a class="del">删除</a></td>
    </tr>
   </tbody>
   <tbody class="fielddownloadbody">
    <tr class="ttr strtxt">
     <td>下拉框<span class="numstrtxt">1</span></td>
     <td><input type="text" name="select[]" id="select1" value="" /></td>
     <td><input type="text" name="svalue[]" id="svalue1" value="" /></td>
     <td><a class="btnGrayS vm">增加</a>&nbsp;&nbsp;<a class="del">删除</a></td>
    </tr>
   </tbody>
  </table>

    2、jQuery

<script type="text/javascript">
    function hanghao(type){
        $("." + type).each(function(i){ 
            $(this).find(".num" + type).html(i+1);
        }); 
    }

$(document).ready(function() {
    //添加单项文本
    $(".trtxt").each(function() {
        $(this).find('.btnGrayS').click(function() {
            var trtxt = $(this).parents(".trtxt");
            //读取当前单项文本的数量
            var num = $(".trtxt").size();
            if (num < 10) {
                newsingle = $(trtxt).clone(true);
                newsingle.appendTo(".singlebody");
                //清空文本
                $(newsingle).find('input').val('');
                hanghao("trtxt");
            } else {
                alert("最多能添加10项")
            }
        });

        //删除
        $(this).find('.del').click(function() {
            var trtxt = $(this).parents(".trtxt");
            var num = $(".trtxt").size();
            if (num == 1) {
                //清空值
                $(trtxt).find('input').val('');
            } else {
                $(trtxt).remove();
                hanghao("trtxt");
            }
        });

    });

    //添加多项文本
    $(".strtxt").each(function() {
        $(this).find('.btnGrayS').click(function() {
            var trtxt = $(this).parents(".strtxt");
            //读取当前单项文本的数量
            var num = $(".strtxt").size();
            if (num < 10) {
                newsingle = $(trtxt).clone(true);
                newsingle.appendTo(".fielddownloadbody");
                //清空文本
                $(newsingle).find('input').val('');
                hanghao("strtxt");
            } else {
                alert("最多能添加10项")
            }
        });

        //删除
        $(this).find('.del').click(function() {
            var trtxt = $(this).parents(".strtxt");
            var num = $(".strtxt").size();
            if (num == 1) {
                //清空值
                $(trtxt).find('input').val('');
            } else {
                $(trtxt).remove();
                hanghao("strtxt");
            }
        });
    });
});
</script>

  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
粉丝 5
博文 28
码字总数 4019
×
xjcyxyx
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: