首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在没有jquery的angularjs中点击td建立tr索引

在没有jQuery的AngularJS中,可以通过使用ng-click指令和ng-repeat指令来实现点击td建立tr索引的功能。

首先,需要在HTML中使用ng-click指令来监听点击事件,并在控制器中定义一个函数来处理点击事件。在点击事件的处理函数中,可以通过操作数据模型来动态添加一个新的tr索引。

HTML代码示例:

代码语言:txt
复制
<table>
  <tr ng-repeat="item in items">
    <td ng-click="addNewRow()">{{ item }}</td>
  </tr>
</table>

在上述示例中,ng-repeat指令用于遍历items数组,并为每个item创建一个tr元素。td元素使用ng-click指令来监听点击事件,并调用addNewRow函数。

接下来,在控制器中定义addNewRow函数,用于添加新的tr索引。可以通过操作数据模型来实现这一功能。

AngularJS控制器代码示例:

代码语言:txt
复制
angular.module('myApp', [])
  .controller('myController', function($scope) {
    $scope.items = ['Item 1', 'Item 2', 'Item 3'];

    $scope.addNewRow = function() {
      // 添加新的tr索引
      $scope.items.push('New Item');
    };
  });

在上述示例中,控制器定义了一个items数组,其中包含了初始的tr索引。addNewRow函数用于向items数组中添加一个新的元素,从而实现动态添加新的tr索引。

这样,当用户点击任意一个td元素时,将会触发addNewRow函数,从而在表格中添加一个新的tr索引。

请注意,上述示例中没有提及具体的腾讯云产品和产品介绍链接地址,因为与问题描述的功能需求无关。如需了解腾讯云相关产品和服务,请参考腾讯云官方文档或咨询腾讯云官方客服。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

前端框架:第一章:AngularJS

目前企业开发使用最多是版本一 AngularJS四大特征 AngularJS设计思想与jquery完全不同,前者操作是变量scope http,后者操作DOM MVC ****模式 Angular...; 双向绑定 AngularJS建立在这样信念上:即声明式编程应该用于构建用户界面以及编写软件构建,而指令式编程非常适合来表示业务逻辑。...理解 $scope: scope 使用贯穿整个 AngularJS App 应用,它与数据模型相关联,同时也是表达式执行上下文.有了scope 就在视图和控制器之间建立了一个通道,基于作用域视图修改数据时会立刻更新...,点击时触发控制器某个方法 循环数组 入门小Demo-6  循环数据...td>{{entity.shuxue}}{{entity.yuwen}} 建立文件 data.json [{"name

7.3K10

day02_品优购电商项目_02_前端框架AngularJS入门 + 品牌列表实现 + 品牌列表分页实现 + 增加修改删除品牌实现 + 品牌分页条件查询实现_用心笔记

1.2.2 双向绑定   AngularJS建立在这样信念上:即声明式编程应该用于构建用户界面以及编写软件构建,而指令式编程非常适合来表示业务逻辑。...有了$scope就在视图和控制器之间建立了一个通道,基于作用域视图修改数据时会立刻更新$scope,同样$scope发生改变时也会立刻重新渲染视图。...{{entity.yuwen}}               建立文件 data.json,注意json文件格式,key必须有双引号...其中plugins文件夹包括了angularjs、bootstrap、jQuery等常用前端库,我们将在项目中用到。 2.2.2 引入JS 修改brand.html ,引入JS <!...,当我们点击复选框后判断是选择还是取消选择,如果是选择就加到数组,如果是取消选择就从数组移除。

9K64
  • AngularJS - 入门小Demo

    AngularJS四大特效 MVC模式、模块化设计、自动化双向数据绑定、依赖注入 如果了解了后端开发知识,想必对这些词汇不会陌生,AngularJS融合了后端开发一些思想,虽然身为前端框架,但与jQuery...比起用js或者jQuery来实现这个功能,AngularJS写法要简单快捷很多。...Demo8 - 内置服务$http 前端数据一般从后端获得,我们一般使用AngularJS内置服务$http来获取后端数据,下边demo需要在容器运行(比如Tomcat)。...math":17, "chinese":46}, {"name":"赵五", "math":60, "chinese":60} ] 需要注意是,.json文件数据必须严格遵守JSON规范,...Demo7由于是js书写,所以可以不必遵守严格JSON格式。另外可以看到,这个$http用法和AJAX很相似,其实其内部就是封装AJAX。

    5.1K10

    MySQL建立自己哈希索引(书摘备查)

    MySQL,只有Memory存储引擎支持显式哈希索引,但是可以按照InnoDB使用方式模拟自己哈希索引。这会让你得到某些哈希索引特性,例如很大键也只有很小索引。...想法非常简单:标准B-Tree索引上创建一个伪哈希索引。它和真正哈希索引不是一回事,因为它还是使用B-Tree索引进行查找。然而,它将会使用键哈希值进行查找,而不是键自身。...你所要做事情就是where子句中手动地定义哈希函数。 一个不错例子就是URL查找。URL通常会导至B-Tree索引变大,因为它们非常长。...选择性很高索引,并且它会使用里面的值进行索引查找。...你可以手工进行维护,MySQL 5.0及以上版本,可以使用触发器来进行维护。下面的例子显示了触发器如何在插入和更新值时候维护url_crc列。

    2.2K30

    与Ajax同样重要jQuery(1)

    , jQuery , 对事件处理, 遍历 DOM 和 Ajax 操作都依赖于选择器 jQuery(expression, [context]) 核心函数jQuery传入表达式,对页面中元素进行选择...input:not(:checked)") :even 选取所有元素偶数索引元素,从 0 开始计数 $("tr:even") ----- 选取奇数元素 :odd 选取所有元素奇数索引元素 ,从0...开始计数 $("tr:odd") ------ 选取偶数元素 :eq(index) 选取指定索引元素 $("tr:eq(1)") :gt(index) 选取索引大于指定index元素 $("tr:...这个动画效果只调整元素高度,可以使匹配元素以“滑动”方式显示出来。jQuery 1.3,上下padding和margin也会有动画,效果更流畅。...⑦:子元素过滤选择器 对某元素子元素进行选取 :nth-child(index/even/odd) 选取索引为index元素、索引为偶数元素、索引为奇数元素 ----- index 从1开始

    10K60

    脚本语言知识总结.

    对象,提供event属性,所以IE可以直接使用 event对象 火狐没有全局event对象,必须在发生事件时,产生一个event对象 ,传递默认方法 6.form提交、重置事件 submit/...2.Ajax快速入门 ①:开发步骤 1).创建XMLHttpRequest对象 2).将状态触发器绑定到一个函数 3).使用open方法建立与服务器连接 4).向服务器端发送数据 5).回调函数对返回数据进行处理...注意:register.html文件,与服务器建立连接是,url一定要写对,否则返回数据时出现404错误!【"/Ajax/CheckUsernameServlet?...  选取所有元素偶数索引元素,从 0 开始计数 $("tr:even")  ----- 选取奇数元素 :odd  选取所有元素奇数索引元素 ,从0 开始计数 $("tr:odd")  -----...如过没有参数传递,采用GET方式传递,否则采用POST方式 练习一:校验用户名是否存在 此练习第五章第三小节有实现代码,这里使用jQuery方式进行简要列出核心代码: $(function(

    5K130

    前端MVC学习总结(三)——AngularJS服务、路由、内置API、jQueryLite

    1.1.2、发送http请求服务 ($http) $http服务从AngularJS代码直接与Web服务器进行交互,底层是通过AJAX实现,与jQuery$.ajax类似 通过$http封装后方法:...二、路由 单页Web应用由于没有后端URL资源定位支持,需要自己实现URL资源定位。angularjs使用浏览器URL "#" 后字符串来定位资源,区分不同功能模块。...四、jQuery Lite jQuery Lite只是jQuery一个简化版本,它直接内置于AngularJS。 支持jQuery方法如下,但有些方法功能上并非完全一样。...完整版本额外功能,那么可以加载AngularJS库之前引入jQuery库。... 自定义指令link:function(scope,elem,attrs,controller

    6.3K50

    AngularJS进阶(十一)AngularJS实现表格数据编辑,更新和删除

    AngularJS实现表格数据编辑,更新和删除 效果 实现 首先,我们先建立一些数据,当然你可以从你任何地方读出你数据 var app = angular.module('plunker', ['...> <...这个是为后面的cancel做准备,当你放弃修改时候,你希望你值恢复成原样,这个时候,对于angularJS来说,是要对model恢复原样。如何恢复修改之前model?...Angular是MVC,所以你这里你不用操心删除table行这样事,只要删除modelemploee.id = @id就可以了 app.directive("delete",function($document...这里我没有用任何现成angular 插件,这只是对angular基本原理阐述,如有误导或者有能简单方法请指教。

    4.8K20

    前端MVC学习总结(三)——AngularJS服务、路由、内置API、jQueryLite

    1.1.2、发送http请求服务 ($http) $http服务从AngularJS代码直接与Web服务器进行交互,底层是通过AJAX实现,与jQuery$.ajax类似 通过$http封装后方法:...二、路由 单页Web应用由于没有后端URL资源定位支持,需要自己实现URL资源定位。angularjs使用浏览器URL "#" 后字符串来定位资源,区分不同功能模块。...四、jQuery Lite jQuery Lite只是jQuery一个简化版本,它直接内置于AngularJS。 支持jQuery方法如下,但有些方法功能上并非完全一样。...完整版本额外功能,那么可以加载AngularJS库之前引入jQuery库。... 自定义指令link:function(scope,elem,attrs,controller

    6.1K30

    如何使用Lily HBase Indexer对HBase数据Solr建立索引

    Lily HBase Indexer提供了快速、简单HBase内容检索方案,它可以帮助你Solr建立HBase数据索引,从而通过Solr进行数据检索。...本文为了简单起见,没有再搭一个Lily Indexer集群,只是借助于Lily Indexer功能对上一篇文章入库21篇文章批量建立全文索引到Solr。...内容概述 1.文件处理流程 2.Solr建立collection 3.准备Morphline与Lily Indexer配置文件 4.开始批量建立全文索引 5.Solr和Hue界面查询 测试环境...1.如上图所示,CDH提供了批量和准实时两种基于HBase数据Solr建立索引方案和自动化工具,避免你开发代码。本文后面描述实操内容是基于图中上半部分批量建立索引方式。...注意Solr在建立全文索引过程,必须指定唯一键(uniqueKey),类似主键,唯一确定一行数据,我们这里示例使用是HBaseRowkey。如果没有,你可以让solr自动生成。

    4.9K30

    01-老马jQuery教程-jQuery入口函数及选择器

    jquery.min.js:压缩版本,去除了注释、换行、空格、并且将一些变量替换成了a,b,c之类简单字符,基本没有可读性,推荐项目生产环境使用,因为文件较小,减少网络压力。...install jquery 2.入口函数介绍 2.1window.onload事件问题 之前DOM课 咱们已经说过用windowonload事件作为JS代码入口,时机并不好。...:eq(index) $("li:eq(2)").css("color", "red"); 获取到li元素,选择索引号为2元素,索引号index从0开始。...li元素,选择索引号为偶数元素 案例:隔行变色 $(function(){ $("tr:odd").css('backgroundColor', '#eee') $("...// 点击了当前行, 那么让当前行 背景高亮,让其他兄弟节点背景不高亮。 // jQuery事件处理程序。 this依然指向 绑定事件dom对象。

    2.5K100

    重学SpringBoot系列之整合静态资源与模板引擎

    我们都知道,JSP第一次执行时候需要转换成Servlet类,开发阶段进行功能调适时,需要频繁修改JSP,每次修改都要编译和转换,那么试想一天我们浪费程序编译时间有多少。...但是java模板引擎,仍然是使用服务器端渲染技术,也就是没有办法将html页面和后台服务层面全面解耦,这就要求前端工程师和后端工程师同一个项目结构下工作,而且前端工程师及其依赖于后端业务数据,页面无法脱离于后端请求数据浏览器独立运行...}"> 迭代下标变量用法: 状态变量定义一个th:每个属性和包含以下数据: index:当前迭代索引,从0开始。...#messages:变量表达式获取外部消息方法,与使用#{…}语法获取方法相同。 #uris:转义部分URL / URI方法。...即可以一个html页面内定义多个片段. ~{ ::selector}表示在当前html页查找代码片段 ---- 多种片段组合方式 实际使用,我们往往使用更简洁表达,去掉表达式外壳直接填写片段名

    5.2K30

    01-老马jQuery教程-jQuery入口函数及选择器

    jquery.min.js:压缩版本,去除了注释、换行、空格、并且将一些变量替换成了a,b,c之类简单字符,基本没有可读性,推荐项目生产环境使用,因为文件较小,减少网络压力。...:eq(index) $("li:eq(2)").css("color", "red"); 获取到li元素,选择索引号为2元素,索引号index从0开始。...li元素,选择索引号为偶数元素 案例:隔行变色 $(function(){ $("tr:odd").css('backgroundColor', '#eee') $("... $(function(){ // jQuery可以通过 原型上click方法进行绑定点击事件。...// 点击了当前行, 那么让当前行 背景高亮,让其他兄弟节点背景不高亮。 // jQuery事件处理程序。 this依然指向 绑定事件dom对象。

    2.4K00

    jQuery

    jQuery没有这个问题。...button标签点击删除时候没有效果 // // 点击modalsubmit按钮 // $("#submit").on('click', function () { #这个和直接...-3.3.1.min.js"> //冒泡意思就是因为html可以嵌套,如果你给儿子标签绑定了点事件或者没有绑定点击事件,父级标签绑定了点击事件,那么你一点击子标签...,不管子标签 有没有绑定事件,都会触发父级标签点击事件,如果有,会先触发子标签点击事件,然后触发父级标签点击事件,不管子标签有没有点击事件,都会一级一级还往上找点击事件 //所以我们要阻止这种事件冒泡...匹配元素集合所有元素上存储任意相关数据或返回匹配元素集合第一个元素给定名称数据存储值。

    8.9K20

    前端MVC学习总结(四)——NodeJS+MongoDB+AngularJS+Bootstrap书店示例

    一、Bootstrap Bootstrap是一个UI框架,它支持响应式布局,PC端与移动端都表现不错。 Bootstrap是Twitter推出一款简洁、直观、强悍前端开发框架。...Bootstrap包含了丰富Web组件,根据这些组件,可以快速搭建一个漂亮、功能完备网站。 ?...1.3、可视化布局 如果想快速高效布局可以使用一些在线辅助工具,如: http://www.ibootstrap.cn/ ? 点击下载可以获得生成HTML脚本。...集合添加5本图书。 ?...六、使用AngularJS调用后台服务 这里UI使用BootStrap完成,前端使用AngularJS调用NodeJS发布服务,将数据存放在MongoDB。 index.js页面如下: <!

    2.3K60
    领券