网站建设资讯

NEWS

网站建设资讯

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

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

为罗江等地区用户提供了全套网页设计制作服务,及罗江网站建设行业解决方案。主营业务为网站建设、网站设计、罗江网站设计,以传统方式定制建设网站,并提供域名空间备案等一条龙服务,秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求,就会得到认可,从而选择与我们长期合作。这样,我们也可以走得更远!

本文实例讲述了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://cdweb.net/article/cogdch.html