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');
}

＆＃13;

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>"
  );
}

＆＃13;

table {
  width: 100%;
  table-layout: fixed;
}

table .active {
  background-color: black;
  color: white;
}

＆＃13;

<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>

＆＃13;

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 个答案: