jquery动态增加删减表格行特效

前端之家收集整理的这篇文章主要介绍了jquery动态增加删减表格行特效前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

基于jQuery表格增加删除代码是一款动态增加删减表格行特效代码分享给大家供大家参考。具体如下: 运行效果截图如下:

具体代码如下:

HTML代码

js代码

显示的条数 var count = 1; //递增的开始值,这里是你的ID $("#btn_addtr").click(function () {
    var length = $("#dynamicTable tbody tr").length;
    //alert(length);
    if (length < show_count)  //点击时候,如果当前的数字小于递增结束的条件
    {
      $("#tab11 tbody tr").clone().appendTo("#dynamicTable tbody");  //在表格后面<a href="https://www.jb51.cc/tag/tianjia/" target="_blank" class="keywords">添加</a>一行
      changeIndex();//更新行号
    }
  });


});
function changeIndex() {
  var i = 1;
  $("#dynamicTable tbody tr").each(function () { //循环tab tbody下的tr
    $(this).find("input[name='NO']").val(i++);//更新行号
  });
}

function deltr(opp) {
  var length = $("#dynamicTable tbody tr").length;
  //alert(length);
  if (length <= 1) {
    alert("至少保留一行");
  } else {
    $(opp).parent().parent().remove();//移除当前行
    changeIndex();
  }
}</pre>

希望本文所述对大家学习javascript成程序设计有所帮助。

原文链接:https://www.f2er.com/jquery/51597.html

猜你在找的jQuery相关文章