zoukankan      html  css  js  c++  java
  • JQuery自动为表格增加一列

    <%@ 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" onclick="addCol()" value="增加列" />  
        <input id="Button2" type="button" onclick="delCol()" value="减少列" />  
        <table id="tab1" border="1" style=" 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>  
  • 相关阅读:
    移动端页面使用rem布局
    Vue2.0 render:h => h(App)
    sublime3 快捷键大全
    node-webkit学习之【无边框窗口用JS实现拖动改变大小等】
    mock.js-无需等待,随机产生数据,让前端独立于后端进行开发
    Sublime Text 3 遇到的一些小坑的解决方法
    Angular Cli 升级到最新版本
    Angular 表单嵌套、动态表单
    angular6 iframe应用
    JS 时间格式 相互转化
  • 原文地址:https://www.cnblogs.com/Snowfun/p/2360998.html
Copyright © 2011-2022 走看看