动态的表格按钮及按钮事件

Layui表格动态渲染状态按钮:从templet函数到事件绑定的完整实现 在前端开发中,数据表格的动态渲染与交互是提升后台管理系统操作效率的关键。其核心原理在于,前端框架通过数据绑定与模板引擎,将后端返回的JSON数据转化为用户可直观操作的DOM元素。这一技术价值在于实现了数据与视图的分离,开发者只需关注数据状态的变化,视图便能自动、高效地更新。在诸如用户管理、订单处理等涉及状态切换的应用场景中,动态渲染操作按钮(如启用/禁用)尤为常见。本文聚焦于Layui这一经典前端框架,深入探讨如何利用其`templet`自定义模板函数,根据行数据状态(如status字段为1或0)动态生成不 阅读详情

 

  href="../Css/BasicLayout.css" type="text/css" rel="stylesheet" />

 

webfrom1.aspx.cs:

using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;

namespace edu.CLIENT
{
 /// <summary>
 /// WebForm1 的摘要说明。
 /// </summary>
 public class WebForm1 : System.Web.UI.Page
 {
  protected System.Web.UI.WebControls.Table tbl_zy;
 
  private void Page_Load(object sender, System.EventArgs e)
  {
   // 在此处放置用户代码以初始化页面
   if(! Page.IsPostBack )
   {
   }
   tableBind();
  }

  #region Web 窗体设计器生成的代码
  override protected void OnInit(EventArgs e)
  {
   //
   // CODEGEN: 该调用是 ASP.NET Web 窗体设计器所必需的。
   //
   InitializeComponent();
   base.OnInit(e);
  }
  
  /// <summary>
  /// 设计器支持所需的方法 - 不要使用代码编辑器修改
  /// 此方法的内容。
  /// </summary>
  private void InitializeComponent()
  {   
   this.Load += new System.EventHandler(this.Page_Load);

  }
  #endregion
  private void tableBind()
  {
   for(int i=0;i<=5;i++)
   {
    TableRow rows = new TableRow ();
    this.tbl_zy.Rows.Add (rows);
    for(int j=0;j<=10;j++)
    {
     TableCell cells = new TableCell ();
     this.tbl_zy.Rows [i].Cells .Add (cells);
     if(i==0 & j==0)
     {
      continue;
     }
     else
     {
      if(i==0 & j>0 )
      {
       //表头
       this.tbl_zy.Rows [i].Cells [j].Text ="第" + j +"列";
      }
      else
      {
       if(i>0 & j==0)
       {
        //行名
        this.tbl_zy.Rows [i].Cells [j].Text ="行" + i;
       }
       else
       {
        Button btn = new Button ();
        btn.ID="c"+i+"md" +j;
        btn.CssClass ="ButtonCss";
        btn.Click +=new System.EventHandler(btn_Click);
        this.tbl_zy.Rows [i].Cells [j].Controls.Add (btn);
       }
      }
     }
    }
   }
  }
  private void btn_Click(object sender,System.EventArgs e)
  {
   Button btn1= (Button)sender;//按钮句柄
   string di;//按钮id
   di = btn1.ID;
   for(int i=1;i<this.tbl_zy.Rows.Count ;i++)
   {
    for(int j=1;j<this.tbl_zy.Rows [i].Cells.Count ;j++)
    {
     string id ="c"+i.ToString () +"md" + j.ToString ();
     ((Button)this.tbl_zy.Rows [i].Cells [j].FindControl (id)).CssClass ="ButtonCss" ;
    }
   }
   if(btn1.CssClass =="InputCss")
   {
    btn1.CssClass  ="ButtonCss";
   }
   else
   {
    btn1.CssClass  ="InputCss";
   }
  }
 }
}

JavaFX表格视图动态演示:添加按钮、图片及事件监听 JavaFX是一个用于构建富客户端应用程序的软件平台,具有丰富的用户界面组件。作为Java SE的一部分,它提供了各种各样的控件来帮助开发者创建直观且功能丰富的桌面应用程序。JavaFX的模块化组件包括按钮、文本框、滑块等,而TableView是其中特别强大的组件之一,适用于显示和管理复杂数据集合。TableView是JavaFX中用于显示和编辑数据集的组件,特别适用于表格数据的展示。它支持多列数据展示,并且可以通过添加不同的单元格工厂来显示复杂的内容,比如按钮和图片。 阅读详情

相关推荐

js生成动态表格并为每个单元格添加单击事件的方法

主要介绍了使用javascript生成动态表格并为每个单元格添加单击事件,需要的朋友可以参考下

动态表格(ajax+json),添加点击事件,获取点击按钮所在行的值

效果:(后期可以自己加css效果) 查找功能 1、数据库连接 package com.gk.dao; import java.sql.Connection; import java.sql.DriverManager; import java.sql.SQLException; public class DaoConnect { public static Connection getConnect(){ Connection con = null; Str

qq_45634989的博客 1114

华为MA5620配置宽带及语音实例

华为EPON配置实例1、公共部分和宽带PPPOE部分用串口用户名密码root/mduadminMA5620E>enableMA5620E#configMA5620E(config)#MA5620E(config)#sysnamebigcow/给设备起名字/****之前为公共部一、建vlan和地址bigcow(config)#vlan100...

weixin_33862041的博客 6347

jQuery :为动态添加的表格添加click事件

** 情境要求 ** 最近在做一个预约订餐的页面,要求根据后台数据建立动态的座位排列。这是根据AJAX的返回数据data建立的表格。 success:function (data) { var a = data.seat_x; var b = data.seat_y; $("#seatDiv").empty(); for(var i = 1; i <= a; i++){//i为seat_x j为seat_y $("#seatDiv").append(<ul></ul>); f

L775862的博客 1690

高通410随身WiFi刷OpenWRT与Debian双系统一键集成方案

本文详细介绍高通410随身WiFi设备刷入OpenWRT与Debian双系统的一键集成方案。通过虎王工作室提供的一键刷机包,用户可轻松实现双系统部署,兼顾OpenWRT的网络功能与Debian的完整应用服务,适用于网络加速、服务器部署等多种场景,并提供了硬件资源分配与系统切换的实用指南。

docker7nomad的博客 1138

Ruoyi-Cloud集成Seata2.0实现分布式事务

在网络上,关于Spring Cloud和Ruoyi-Cloud整合Seata的教程有很多,针对不同版本的 Seata 也有不少相关教程。事实上,无论是 Spring Cloud 还是 Ruoyi-Cloud,其整合 Seata 的原理基本相同。这篇博文将详细介绍如何在本地开发环境下,在中实现Seata 2.0的整合,希望能为大家在分布式项目中实现 Seata 的整合提供实用的帮助,提供一个清晰的操作思路。

SR003的博客 2246

jquery动态添加按钮,按钮点击事件失效

今天遇到一个这样的问题: 问题描述:页面上的数据需要动态添加(append)进去,但是动态添加进去的按钮的点击事件失效,这样怎样解决呢? 原因分析:append中的节点是在整个文档加载完之后开始添加,因此页面不会为append的元素初始化添加点击事件 按钮失效代码: $('.edit').click(function(){ console.log('111111'); }) 正...

欢迎来到我的频道~ 4837

5G NR LDPC码(2)—— 从基图到速率匹配:解码5G高速数据信道的标准化设计

本文深入解析了5G NR LDPC码的标准化设计流程。从作为核心骨架的基图(BG1/BG2)出发,详细阐述了其如何通过扩展因子Z灵活生成实际校验矩阵,并协同传输块大小计算与分段策略。文章重点剖析了基于循环缓存和冗余版本的速率匹配机制,以及其如何高效支撑增量冗余混合自动重传请求,从而确保5G高速数据信道在复杂环境下的可靠与高效传输。

weixin_29206669的博客 272

vue+Element UI table表格动态渲染(包括操作按钮列)、按钮动态绑定点击事件

涉及内容: Element UI的使用; vue如何动态循环渲染Element UI中table内容; Element UI中table最后一列为操作按钮,如何动态渲染并绑定点击事件。 一、Element UI的使用 查看文档使用:Element UI文档 安装 npm i element-ui -S 在main.js中进行引入: import Vue from 'vue'; import ElementUI from 'element-ui'; import 'element-ui/lib/

qq_37899622的博客 1万+

广东省道路工程检测练习试题(判断题)真题

按下式计算小于某粒径颗粒质量百分数:X=(A/B)x100( )49.、挖坑灌砂法适用于在现场测定基层(或底基层)、砂石路面及路基土的各种材料压实层的密度和压实度,但不适用于填石路堤等有大孔洞或大孔隙材料的压实度检测。95.挖坑灌砂法适用于在现场测定基层(或底基层)、砂石路面及路基土的各种材料压实层的密度和压实度,但不适用于填石路堤等有大孔洞或大孔隙材料的压实度检测( )107.以干密度 pd 为纵坐标,含水率w为横坐标,绘 pd-w 关系曲线,曲线上峰值点的纵、横坐标分别为最大干密度和最佳含水率( )

ZShy001238的博客 684

基于Simulink的鲸鱼优化算法(WOA)MPPT仿真

摘要:本文介绍了基于Simulink的鲸鱼优化算法(WOA)在光伏MPPT控制中的应用。WOA模拟座头鲸的"气泡网捕食策略",通过包围猎物、螺旋收缩和随机搜索三阶段动态平衡全局探索与局部开发能力,有效解决局部阴影导致的多峰P-V曲线问题。文章详细讲解了WOA-MPPT的Simulink建模过程,包括多峰光伏阵列建模、WOA控制器实现和Boost变换器控制。仿真结果显示,在三种典型工况下,WOA-MPPT的追踪效率>99.3%,动态响应时间<0.15s,性能优于传统算法。最后提出了混合WO

amy_mhd的博客 72

Asp.net(C#)动态生成表格中的按钮和事件响应

最近几天一直在用C#写Asp.net的东西,发觉Asp.net很好用,也不好用,可能自己的认识比较浅,所以还要多多学习。下面是我遇上的一个问题,要动态的生成表格的行,同时在表格中插入按钮相应事件。插入表格行比较简单 第一步,现在页面上创建一个表格控件,如下代码: <asp:Table ID="tblCity" runat="server" Width="300px"></asp...

u014712365的博客 415

即插即用篇 | 手把手教你 YOLOv11 添加注意力机制 | 适用于【检测任务】【分类任务】【分割任务】【关键点任务】| 20+ 种全打通!

即插即用篇 | 手把手教你 YOLOv11 添加注意力机制 | 适用于【检测任务】【分类任务】【分割任务】【关键点任务】| 20+ 种全打通!

Coding... 2831

Vue-elementUI 表格里动态添加行操作按钮,并且是el-dropdown 下拉框,给el-dropdown绑定点击事件

Vue-elementUI 表格里动态添加行操作按钮,并且是el-dropdown 下拉框,给el-dropdown绑定点击事件 一共两种方法: 一、直接给el-dropdown-item 绑定点击事件。这里需要用 @click.native=" name" 这样绑定才会有效。 <el-table :data=“orderAcceptTableData” stripe border hei...

qq_19808621的博客 1万+

7、Python高光谱分析工具(PyHAT)简介

Python高光谱分析工具(PyHAT)是一个开源、跨平台的Python库及图形用户界面,用于行星光谱数据的可视化与分析。它支持多种高光谱传感器数据,如火星勘测轨道飞行器的CRISM、月船1号的M3以及SELENE Kaguya SP点光谱仪,提供预处理、衍生产品生成、统计学习和机器学习分析功能。PyHAT基于Pandas和NumPy构建,兼容Jupyter和QGIS环境,旨在解决现有光谱分析方法缺乏开源实现、难以探索性分析和算法分散的问题。其模块化架构涵盖数据输入/输出、通用光谱变换、测绘与点观测工具及高

aa123的博客 138

大中型超市收银系统(可直接运行)

光步前台收银系统系统功能:商品销售、商品退货、挂单、收银员权限、会员销售、单品取消、整单取消、商品查询、脱机销售、脱机数据上传,基本资料下载,开钱箱、小票打印、收款结算,支持多币种付款方式(现金、储值卡、礼券、微信等),支持多种促销。运行环境:.net 4.0登陆信息用户名:1001 密码:123456内置商品信息,商品编码可输入00001000 - 00010000,测试效果相关功能键F5 结算 F9挂单 F11商品查询 F8退货 Insert单品取消 Del整单取消 F12开钱箱F2 会员 Ctrl+Z退出系统 Home 锁屏 相关源码待公开

html动态生成按钮事件,javascript-jQuery-动态创建按钮并附加事件指针

javascript-jQuery-动态创建按钮并附加事件指针我想使用jQuery向表中动态添加按钮控件,并附加click事件处理程序。 我尝试了以下操作,但没有成功:$("#myButton").click(function () {var test = $('Test').click(function () {alert('hi');});$("#nodeAttributeHeader").a...

weixin_39793638的博客 498

OV9734 DATASHEET,完整规格书

OV9734完整规格书,包括电气参数,尺寸规格,寄存器配置表等

html表格每一行加一个按钮,js 根据data动态生成table表格,每行后面有一个删除按钮,这个删除按钮怎么绑定事件,并且可以...

var tablePlugin = {tableDate: [],initTable:function(){var tableTbody = document.getElementById('tableTbody');var tr = this.tableTrModule(this.tableDate);console.log(tr);tableTbody.addEventListener('cl...

weixin_33238848的博客 895

jdk-8u144-linux-x64.tar.gz.

该资源为搭建Linux系统Java环境用,资源的后缀为tar.gz格式的压缩包

霍尼韦尔SoftMaster使用说明

霍尼韦尔SoftMaster使用说明

点击按钮实现表格tr的追加与删除

点击按钮实现表格tr的追加与删除首先看下效果图 首先看下效果图 我们现在要实现点击绿色加号按钮在盒子中追加一行tr标签: 1,因为最后的加号tr要跟在上面查询出来的数据后面,所以我在网页一加载就把它append在盒子的最后面,具体代码如下: $(".box-scrollbar table").append("<tr>\n" + " ...

weixin_43696616的博客 1934

layui表格的单元格添加按钮,并绑定事件(不是toolbar或者tool)

1.上图 2.怎么做呢?(我的笨方法) 2.1先给单元格加按钮 2.2给按钮添加单击事件 varlayIndex;// 便于赋值 $(document).on('click',' .subnamebtn',function(){//尽量使用动态绑定 layIndex=$(this).data("index"); modules.inoutSelectPop(); }) 2.2...

hangchen1025的博客 8365

vue elementui点击一次按钮动态生成一个表格

vue elementui点击一次按钮动态生成一个表格 文章目录vue elementui点击一次按钮动态生成一个表格效果图一、使用思路:既然是多个,就想到数组循环1.将原先存在的表格作为数组元素2.点击按钮调用方法添加成功 效果图 一、使用思路:既然是多个,就想到数组循环 1.将原先存在的表格作为数组元素 代码如下(示例): <div v-for="(item1, index1) in table" :key="index1"> <el-table :data="it

波塞冬的博客 3461

动态添加table列表以及行、按钮点击事件

动态添加table列表 获取并遍历数据 .done(function (data) { dom = ''; data.list.forEach(function (pre) { //拼接列表 dom += '<tr>'; dom += '<td>'+ pre.presetPointIndex +'</td>'; d...

weixin_41058481的博客 1184

layui动态表格 动态查询数据

layui 表格显示以及 用input查询table表格 ## 首先定义一个文本框和一个搜索 注意搜索按钮里的 data-type="reload" 和input id <div class="layui-form-item"> <div class="layui-inline">...

逗比爱好者 4600
下一篇: datagrid多层表头
wolf_lx
博客等级 码龄21年 1粉丝 7原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值