[英]how to add a css class when button clicked and and also remove that with another button click
I am actually creating the table dynamically , adding rows like this 我实际上是在动态创建表,像这样添加行
markup = "<tr onclick="+"getDetails(this)"+"><td>" + col1value+ "</td><td>" + col2value+ "</td></tr>";
$("#MyTableID tbody").append(markup);
now i created a table row click which is below , making remove button visible 现在我在下面创建了一个表格行单击,使“删除”按钮可见
function getDetails(row) {
$('#buttonRemove').css('visibility', 'visible');
}
Now i have to add a css class to the row clicked and also when button remove is clicked the selected row should be removed 现在,我必须向单击的行中添加一个CSS类,并且当单击删除按钮时,也应删除所选的行
how to write that. 怎么写。
Also i have to check another this in my remove button click function that is there any row present in table or not - how to put that logic 另外我还必须在我的删除按钮单击功能中检查另一个是否存在表中任何行的方法-如何放置该逻辑
To toggle class on dynamic tr
click use .toggleClass
: 要在动态
tr
上切换类,请使用.toggleClass
:
// Always bind 'on' to static element
$(document).on('click', '#MyTableID tbody tr', function () {
$(this).toggleClass('classToToggle');
// For more classes: .toggle('class1 class2'); - will remove what exists and add what is missing
// For more precise toggling: .toggle('classN', trueIfToAdd)
});
To check if table has any rows: 要检查表是否有任何行:
if ($('#MyTableID tbody tr').length) {
alert('there is rows added');
} else {
alert('No rows added');
}
function getDetails(el) { $(el).toggleClass('active'); console.log('Rows count: '+$('#MyTableID tbody tr').length); } function removeRow(el) { $(el).closest('tr').remove(); } function addRow() { $('#MyTableID tbody').append( "<tr onclick='getDetails(this)'><td>" + Math.ceil(Math.random() * 10) + "</td><td>" + Math.ceil(Math.random() * 10) + "</td><td><button onClick='removeRow(this)'>Remove</button></td></tr>" ); }
table { width: 100%; table-layout: fixed; } table .active { background-color: black; color: white; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id="MyTableID"> <thead><th>Val 1</th><th>Val 2</th><th>Remove</th></thead> <tbody></tbody> </table> <hr/> <button onClick="addRow()">Add row</button>
The following code changes the look and feel of the table by changing its class, it is achieved by AngularJS: 以下代码通过更改表的类来更改表的外观,这是通过AngularJS实现的:
<pre>
<%@page import="java.util.Iterator"%>
<%@page import="java.util.ArrayList"%>
<%@page import="java.util.HashMap"%>
<%@page import="Controller.DataController"%>
<%@page import="java.util.List"%>
<%@ taglib uri='http://java.sun.com/jsp/jstl/core' prefix='c'%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page session="true" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<style>
div {
transition: all linear 0.5s;
height: 100px;
}
table{
transition: all linear 0.5s;
}
.ng-size {
color: red;
font-size:1em;
}
.ng-hide
{
opacity: 0;
}
td{
transition: all linear 0.5s;
}
input{
transition: all linear 0.5s;
}
</style>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-
animate.js"></script>
<body ng-app="myApp">
<form name="angular" id="angular" action="data" method="get">
<p align="center">
<input type="button" value="color" ng-click="myStyle={color : 'red'}">
<input type="button" value="hide" ng-click="myStyle={opacity: 0}">
<input type="button" value="border" ng-click="noborder={border: 0}">
<input type="button" value="width" ng-click="noborder={width: '75%'}">
<input type="button" value="clear" ng-click="myStyle={}">
<input type="button" value="hide column data" ng-click="hide={opacity:
'0'}">
<input type="button" value="reset" ng-click="hide={}">
</p>
</br>
</br>
<div ng-style ="myStyle">
<table ng-style="noborder" border="1" width="50%" align="center">
<th>Name</th>
<th>Gender</th>
<th>Age</Age>
<c:forEach var="listItems" items="${ViewList}" >
<tr>
<td ><input ng-style="hide" type="text" value="${listItems[0]}"></td>
<td ><input type="text" value="${listItems[1]}"></td>
<td><input type="text" value="${listItems[2]}"></td>
</tr>
</c:forEach>
</table>
</div>
</br>
<table align="center">
<tr>
<td><h3>Name:<input type="text" name="nameinput"></h3></td>
<td><h3>Gender<input type="text" name="genderinput"></h3></td>
<td><h3>Age:<input type="text" name="ageinput"></h3></td>
</tr>
</table>
</br>
<p align="center">
<input type = "submit" value="Submit">
</p>
<script>
var app = angular.module('myApp', ['ngAnimate']);
</script>
</form>
</body>
</html>
</pre>
By using AngularJS you can change the attributes of the DOM elements on the same page(that is without reloading the page). 通过使用AngularJS,您可以更改同一页面上DOM元素的属性(即无需重新加载页面)。 Hope this will help you :)
希望这个能对您有所帮助 :)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.