如何在单击按钮时添加css类，以及如何通过单击另一个按钮将其删除

Question

我实际上是在动态创建表，像这样添加行

markup = "<tr onclick="+"getDetails(this)"+"><td>" + col1value+ "</td><td>" + col2value+ "</td></tr>";
                $("#MyTableID tbody").append(markup);

现在我在下面创建了一个表格行单击，使“删除”按钮可见

function getDetails(row) {
    $('#buttonRemove').css('visibility', 'visible');


}

现在，我必须向单击的行中添加一个CSS类，并且当单击删除按钮时，也应删除所选的行

怎么写。

另外我还必须在我的删除按钮单击功能中检查另一个是否存在表中任何行的方法-如何放置该逻辑

Answer 1

要在动态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)
 });

要检查表是否有任何行：

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>

Answer 2

以下代码通过更改表的类来更改表的外观，这是通过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>

通过使用AngularJS，您可以更改同一页面上DOM元素的属性（即无需重新加载页面）。 希望这个能对您有所帮助：）

如何在单击按钮时添加css类，以及如何通过单击另一个按钮将其删除

问题描述

2 个解决方案

解决方案1
1 已采纳 2017-04-28 05:15:48

解决方案2
-1 2017-04-28 05:42:01

如何在单击按钮时添加css类，以及如何通过单击另一个按钮将其删除

问题描述

2 个解决方案

解决方案1 1 已采纳 2017-04-28 05:15:48

解决方案2 -1 2017-04-28 05:42:01

解决方案1
1 已采纳 2017-04-28 05:15:48

解决方案2
-1 2017-04-28 05:42:01