JQuery自动为表格增加一列

最新推荐文章于 2022-04-21 23:16:26 发布

临海听风_518

最新推荐文章于 2022-04-21 23:16:26 发布

阅读量692

点赞数

分类专栏： jquery使用心得与体会文章标签： javascript 前端 xhtml ViewUI

本文链接：https://blog.csdn.net/qixiaowei_888/article/details/84498735

版权

jquery使用心得与体会专栏收录该内容

56 篇文章 0 订阅

订阅专栏

 
    
  

    <%@ Page Language= 
   " 
   C# 
   " AutoEventWireup= 
   " 
   true 
   " CodeFile= 
   " 
   test.aspx.cs 
   " Inherits= 
   " 
   test 
   " %> 
   
 
   
<!DOCTYPE html PUBLIC  
   " 
   -//W3C//DTD XHTML 1.0 Transitional//EN 
   "  
   " 
   http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd 
   "> 
   
 
   
<html xmlns= 
   " 
   http://www.w3.org/1999/xhtml 
   ">   
   
<head>   
   
    <title></title>   
   
    <script  src= 
   " 
   js/jquery-1.4.1.min.js 
   " mce_src= 
   " 
   js/jquery-1.4.1.min.js 
   " type= 
   " 
   text/javascript 
   "></script> 
   
    <script type= 
   " 
   text/javascript 
   "> 
   
         function addCol() {   
   
            $col = $( 
   " 
   <td>增加的列</td> 
   ");   
   
            $( 
   " 
   #tab1>tbody>tr 
   ").append($col);   
   
        }   
   
        function delCol() {   
   
             
   // 
   移除最后一列   
   
            $( 
   " 
   #tab1 tr :last-child 
   ").remove();   
   
             
   // 
   移除第一列  
             
   // 
   $("#tab1 tr :first-child").remove();  
             
   // 
   移除指定的列, 注:这种索引从1开始  
             
   // 
   $("#tab1 tr :nth-child(2)").remove();  
             
   // 
   移除第一列之外的列  
             
   // 
   $("#tab1 tr :not(:nth-child(1))").remove();   
   
        }   
   
    </script> 
   
  
   
</head>   
   
<body>   
   
    <input id= 
   " 
   Button1 
   " type= 
   " 
   button 
   " οnclick= 
   " 
   addCol() 
   " value= 
   " 
   增加列 
   " />   
   
    <input id= 
   " 
   Button2 
   " type= 
   " 
   button 
   " οnclick= 
   " 
   delCol() 
   " value= 
   " 
   减少列 
   " />   
   
    <table id= 
   " 
   tab1 
   " border= 
   " 
   1 
   " style= 
   " 
   width: 200px; 
   ">   
   
 
   
        <tbody>   
   
            <tr>   
   
                <td>  
   1</td>   
   
                <td> hello</td>   
   
            </tr>   
   
            <tr>   
   
                <td> 
   2</td>   
   
                <td>world</td>   
   
            </tr>   
   
            <tr>   
   
                <td> 
   3</td>   
   
                <td>王子饼</td>   
   
            </tr> 
   
        </tbody>   
   
    </table>   
   
</body>   
   
</html>   
  

临海听风_518

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JQuery自动为表格增加一列

&lt;%@ Page Language="C#" AutoEventWireup="true" CodeFile="test.aspx.cs" Inherits="test" %&gt;&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or
复制链接

扫一扫