how to add a css class when button clicked and and also remove that with another button click

Question

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

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

Answer 1

To toggle class on dynamic tr click use .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>

Answer 2

The following code changes the look and feel of the table by changing its class, it is achieved by 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). Hope this will help you :)

how to add a css class when button clicked and and also remove that with another button click

Question

2 answers

solution1
1 ACCPTED 2017-04-28 05:15:48

solution2
-1 2017-04-28 05:42:01

how to add a css class when button clicked and and also remove that with another button click

Question

2 answers

solution1 1 ACCPTED 2017-04-28 05:15:48

solution2 -1 2017-04-28 05:42:01

solution1
1 ACCPTED 2017-04-28 05:15:48

solution2
-1 2017-04-28 05:42:01