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

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

创新互联建站长期为千余家客户提供的网站建设服务,团队从业经验10年,关注不同地域、不同群体,并针对不同对象提供差异化的产品和服务;打造开放共赢平台,与合作伙伴共同营造健康的互联网生态环境。为延边朝鲜族企业提供专业的成都网站制作、成都网站设计、外贸营销网站建设延边朝鲜族网站改版等技术服务。拥有十多年丰富建站经验和众多成功案例,为您定制开发。

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



    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.

下面是直接添加和删除当前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('');
        }
    }

JavaScript是什么

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

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


当前题目:JS/jQuery如何实现超简单的Table表格添加,删除行功能
文章分享:http://myzitong.com/article/iigheh.html