JS/jQuery如何实现超简单的Table表格添加,删除行功能-创新互联

小编给大家分享一下JS/jQuery如何实现超简单的Table表格添加,删除行功能，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！

本文实例讲述了JS/jQuery实现超简单的Table表格添加,删除行功能。分享给大家供大家参考，具体如下：

    



    
        性别
        姓名
        年龄
    
    
        
            
              男
              女
            
        
        
            
        
        
            
        
    

//动态添加行
function addRow(){
  var table = document.getElementById("tableID");
  var newRow = table.insertRow(); //创建新行
  var newCell1 = newRow.insertCell(); //创建新单元格
  newCell.innerHTML = ""； //单元格内的内容
  newCell.setAttribute("align","center"); //设置位置
}
//动态删除行
function deleteRow(){
  var rowIndex = event.srcElement.parentElement.parentElement.rowIndex;
  var styles = document.getElementById("tableID");
  styles.deleteRow(rowIndex);
}

用克隆的方式

var index = 0;
$(document).ready(function(){
 $("button").click(function(){
 index++;
  $("body").append($("p").clone().attr({'id':'name'+index,'name':'pwd'+index}));
 });
});



This is a paragraph.
复制每个 p 元素，然后追加到 body 元素

下面是直接添加和删除当前table表格,很好用

 
  " rel="external nofollow" >
    
    
    
    
    
    
  
 
 
  添加
  显示
  
 

    var index = 0;
    var a = function(){
        index++;
        var tab = "";
        tab += "尺寸规格";
        tab += "长度宽度数量(个)";
        tab += "摆放区域单个面积(平方米)总面积";
        tab += "内容描述";
        tab += "";
        $('#tab').append(tab);
    }
    function del(ind){
        $('#tab_'+ind).remove();
    }
    function b(ind){
        var cdd = $('#cd_'+ind).val();
        var kdd = $('#kd_'+ind).val();
        if(cdd==''){cdd = 1;}
        if(kdd==''){kdd = 1;}
        if(cdd==''&&kdd==''){
            $('#dgmj_'+ind).val('');
        }else{
            $('#dgmj_'+ind).val(cdd * kdd);
        }
    }
    function c(ind){
        var cdd = $('#cd_'+ind).val();
        var kdd = $('#kd_'+ind).val();
        var sll = $('#sl_'+ind).val();
        if(cdd==''){cdd = 1;}
        if(kdd==''){kdd = 1;}
        if(sll==''){sll = 1;}
        if(cdd==''&&kdd==''&&sll==''){
            $('#zmj_'+ind).val('');
        }else if(cdd!=''&&kdd!=''&&sll!=''){
            $('#zmj_'+ind).val(cdd * kdd * sll);
        }else{
            $('#zmj_'+ind).val('');
        }
    }

JS是JavaScript的简称，它是一种直译式的脚本语言，其解释器被称为JavaScript引擎，是浏览器的一部分，主要用于web的开发，可以给网站添加各种各样的动态效果，让网页更加美观。

看完了这篇文章，相信你对“JS/jQuery如何实现超简单的Table表格添加,删除行功能”有了一定的了解，如果想了解更多相关知识，欢迎关注创新互联行业资讯频道，感谢各位的阅读！