I have some HTML code that uses some embedded python to create a table of results that have been extracted from an SQLlite database. The HTML also uses bootstrap to create a table to highlight the rows when the mouse hovers of each row.
<div class="col-md-6">
<h3> Suggested tools </h3>
<table class="table table-hover">
<tr><th> Tool </th> <th> Function </th> </tr>
{% for post in posts %}
<tr class="table-light" onclick="changeClass()"> <td>{{post.tool}} </td> <td> {{post.summary}}</td> <td> </tr>
{% endfor %}
</table>
<p id="test"> </p>
</div>
When I select a particular row I want the row to change color. Using Bootcamp I know I can make this happen by changing the class property and the following code produces the desired result:
<tr class="table-light" onclick="this.className='success'"> <td>{{post.tool}} </td> <td> {{post.summary}}</td> <td> </tr>
This works well as each row is generated within the loop so the this object makes sure only the selected row has the class changed. The problem is I have some further javascript code I want to add to the onclick event. Is there a way of using a javascript function to access the this object so that it is used in the same way as elements in HTML?
I've tried this but as anticipated no success
HTML:
<tr class="table-light" onclick="changeClass()"> <td>{{post.tool}} </td> <td> {{post.summary}}</td> <td> </tr> code here
Javascript:
function changeClass() {
return "this.className= 'table-success';}
You need delegation and unobtrusive non-inline code
Also your HTML is not valid. You should run the rendered page through a validator
const additem = id => console.log(id);
document.querySelector(".table").addEventListener("click", function(e) {
const tgt = e.target;
if (tgt.classList.contains("add")) {
additem(tgt.dataset.id)
} else {
const row = tgt.closest("tr");
if (row.classList.contains("table-light")) {
row.classList.add("table-success");
}
}
})
.table-success { background-color:green}
<div class="col-md-6">
<h3> Suggested tools </h3>
<table class="table table-hover">
<tr>
<th> Tool </th>
<th> Function </th>
</tr>
<tr>
<td>tool</td>
<td>summary</td>
<td> <button type="button" class="add" data-id="{{post.id}}">ID1</button></td>
</tr>
<tr class="table-light">
<td>tool</td>
<td>summary</td>
<td>
</tr>
</table>
<p id="test"> </p>
</div>
Just pass it to the function:
function changeClass(row) {
console.log(row)}
<table>
<tr class="table-light" onclick="changeClass(this)"> <td>{{post.tool}} </td> <td> {{post.summary}}</td> <td> </tr>
<tr class="table-light" onclick="changeClass(this)"> <td>{{post.tool}} </td> <td> {{post.summary}}</td> <td> </tr>
</table>
You can do it by passing this with function call
function changeClass(row) {
row.className= 'table-success'
}
.table-success{
background-color:gray;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div class="col-md-6">
<h3>Suggested tools</h3>
<table class="table table-hover">
<tr>
<th>Tool</th>
<th>Function</th>
</tr>
<tr class="table-light" onclick="changeClass(this)">
<td>some data</td>
<td>some data</td>
<td></td>
</tr>
<tr class="table-light" onclick="changeClass(this)">
<td>some data</td>
<td>some data</td>
<td></td>
</tr>
<tr class="table-light" onclick="changeClass(this)">
<td>some data</td>
<td>some data</td>
<td></td>
</tr>
</table>
<p id="test"></p>
</div>
</body>
</html>
Try this:
HTML:
<tr onclick="foo(this);"></tr>
JavaScript:
let foo = elem =>{
console.log(elem.className);
}
I am trying to get row data from a table so I can use it in a modal. Below is my code for Views.
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css">
<link href="#Url.Content("~/css/bootstrap.css")" rel="stylesheet">
<link href="~/Content/themes/base/all.css" rel="stylesheet" />
<script>
$(document).ready(function () {
$("#acctInfo").DataTable();
$(".td_0").hide();
});
</script>
<!-- Page Title
============================================= -->
<section id="page-title">
<div class="container clearfix">
<h1>View Accounts</h1>
</div>
</section><!-- #page-title end -->
<section id="content">
<div class="content-wrap">
<div class="container clearfix">
<table class="table table-striped table-condensed table-hover" id="acctInfo">
<thead>
<tr>
<th class="td_0">Account Id</th>
<th>Employee Id</th>
<th>First Name</th>
<th>Middle Name</th>
<th>Last Name</th>
<th>Business Name</th>
<th>Account Type</th>
<th></th>
#*<th></th>*#
</tr>
</thead>
<tbody>
#foreach (var i in Model.AccountsViews)
{
<tr id="rowx">
<td > #Html.DisplayFor(m => i.AcctId)</td>
<td > #Html.DisplayFor(m => i.EmployeeId)</td>
<td > #Html.DisplayFor(m => i.FirstName)</td>
<td > #Html.DisplayFor(m => i.MiddleName)</td>
<td > #Html.DisplayFor(m => i.LastName)</td>
<td > #Html.DisplayFor(m => i.BusinessName)</td>
<td > #Html.DisplayFor(m => i.AccountType)</td>
#*<td>Edit</td>
<td>Delete</td>*#
<td>
<input type="button" value="Edit" class="btn btn-success form-control" onclick="OpenSelected()" />
</td>
</tr>
}
</tbody>
</table>
</div>
</div>
</section>
<div id="divEdit" style="display: none;">
<input type="hidden" id="hidId"/>
<table>
<tr>
<td>Employee Id</td>
<td><input type="text" id="txtEmployeeId" class="form-control"/></td>
</tr>
<tr>
<td>First Name</td>
<td><input type="text" id="txtFirstName" class="form-control"/></td>
</tr>
<tr>
<td>Middle Name</td>
<td><input type="text" id="txtMiddleName" class="form-control"/></td>
</tr>
<tr>
<td>Last Name</td>
<td><input type="text" id="txtLastName" class="form-control"/></td>
</tr>
<tr>
<td>Business Name</td>
<td><input type="text" id="txtBusinessName" class="form-control"/></td>
</tr>
#*<tr>
<td>Account Type</td>
<td>
#Html.DropDownListFor(o => )
</td>
</tr>*#
</table>
</div>
<script>
function OpenSelected() {
var a = $('.trSelected td').eq(4).text();
alert(a);
}
</script>
With that code, I am able to invoke the alert method with the following code:
<script>
function OpenSelected() {
var a = $('.trSelected td').eq(4).text();
alert(a);
}
</script>
but it has no value of the cell that I need. It only has "localhost/1234 Says: " the alert has no value. I need your help. Thank you.
Give a try to following code... .closset would give you the selected row and than you find columns value on the base of indexes.
<script>
$('.btn-success').click(function () {
var a = $(this).closest("tr").find('td:eq(0)').text();
var b = $(this).closest("tr").find('td:eq(1)').text();
alert(a);
});
</script>
Try using :eq() selector at this context
You should use .text() instead to retrieve its text content,
var t = $('#table');
var val1 = $(t).find('tr:eq(2) td:eq(4)').text();
alert(val1);
Or do,
alert($('#table tr:eq(2) td:eq(4)').text());
DEMO
I want to show json data inside a table using AngularJS ng-repeat but my first row of the table remains empty as I am not accessing the first row of json data.I want to omit the first row of json data inside the table. How to achieve this?
My json format :
var myApp = angular.module('myApp',['ui.bootstrap']);
myApp.controller('MyCtrl', function($scope) {
$scope.list = [
{"dept_id":"d10","dname":"dname"},
{"eid":"10","ename":"nam1"},
{"eid":"20","ename":"nam2"},
{"eid":"30","ename":"nam3"},
{"eid":"40","ename":"nam4"}
];
$scope.list1 = [
{"eid":"10","ename":"nam1"},
{"eid":"20","ename":"nam2"},
{"eid":"30","ename":"nam3"},
{"eid":"40","ename":"nam4"}
];
});
<html>
<head>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
</head>
<div class="container">
<div ng-app="myApp" ng-controller="MyCtrl">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Sr</th>
<th>Employee ID</th>
<th>name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="data in list">
<td> {{$index+1 }} </td>
<td> {{ data.eid }} </td>
<td> {{ data.ename }} </td>
</tr>
</tbody>
</table>
But I want like this :
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Sr</th>
<th>Employee ID</th>
<th>name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="data in list1">
<td> {{$index+1 }} </td>
<td> {{ data.eid }} </td>
<td> {{ data.ename }} </td>
</tr>
</tbody>
</table>
</div>
</div>
Try using ng-if like this
<tr ng-repeat="data in list1" ng-if="$index > 0">
<td> {{$index+1 }} </td>
<td> {{ data.eid }} </td>
<td> {{ data.ename }} </td>
</tr>
Change code like :
<tr ng-repeat="data in list track by $index" ng-if="!$first">
Simply ng-if and there's no need for increasing $index shown.
var myApp = angular.module('myApp',['ui.bootstrap']);
myApp.controller('MyCtrl', function($scope) {
$scope.list = [
{"dept_id":"d10","dname":"dname"},
{"eid":"10","ename":"nam1"},
{"eid":"20","ename":"nam2"},
{"eid":"30","ename":"nam3"},
{"eid":"40","ename":"nam4"}
];
$scope.list1 = [
{"eid":"10","ename":"nam1"},
{"eid":"20","ename":"nam2"},
{"eid":"30","ename":"nam3"},
{"eid":"40","ename":"nam4"}
];
});
<html>
<head>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
</head>
<div class="container">
<div ng-app="myApp" ng-controller="MyCtrl">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Sr</th>
<th>Employee ID</th>
<th>name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="data in list" ng-if="$index">
<td> {{$index }} </td>
<td> {{ data.eid }} </td>
<td> {{ data.ename }} </td>
</tr>
</tbody>
</table>
But I want like this :
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Sr</th>
<th>Employee ID</th>
<th>name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="data in list1" ng-if="$index">
<td> {{$index }} </td>
<td> {{ data.eid }} </td>
<td> {{ data.ename }} </td>
</tr>
</tbody>
</table>
</div>
</div>
If you want to omit the first row in ng-repeat, you can track row's with $index on skip $index = 0 using ng-if
var myApp = angular.module('myApp',['ui.bootstrap']);
myApp.controller('MyCtrl', function($scope) {
$scope.list = [
{"dept_id":"d10","dname":"dname"},
{"eid":"10","ename":"nam1"},
{"eid":"20","ename":"nam2"},
{"eid":"30","ename":"nam3"},
{"eid":"40","ename":"nam4"}
];
$scope.list1 = [
{"eid":"10","ename":"nam1"},
{"eid":"20","ename":"nam2"},
{"eid":"30","ename":"nam3"},
{"eid":"40","ename":"nam4"}
];
});
<html>
<head>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
</head>
<div class="container">
<div ng-app="myApp" ng-controller="MyCtrl">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Sr</th>
<th>Employee ID</th>
<th>name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="data in list track by $index" ng-if="$index > 0">
<td> {{$index+1 }} </td>
<td> {{ data.eid }} </td>
<td> {{ data.ename }} </td>
</tr>
</tbody>
</table>
But I want like this :
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Sr</th>
<th>Employee ID</th>
<th>name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="data in list1">
<td> {{$index+1 }} </td>
<td> {{ data.eid }} </td>
<td> {{ data.ename }} </td>
</tr>
</tbody>
</table>
</div>
</div>
I want to know how to display list of selected values in popup window as dropdown.
here is my clientview.jsp code
</head>
<body>
<jsp:include page="clientusrmapheader.jsp">
<jsp:param name="" value="true"/>
</jsp:include>
<div class="tcc" style="min-height:620px; width:100%;float:left;">
<form:form method="POST" modelAttribute="clientAccounts" action="/client_user_map.html">
<div id='baseDiv'>
<input type="submit" value="CLIENT-USER MAP"/>
<%# include file="/WEB-INF/views/clientusermap.jsp"%>
</div>
<table>
<thead>
<tr>
<th><span class="selectALLWrap"> <input type='checkbox' id='selectALL' onclick='selectALLQuestion()'></span><span>Select</span> </th>
<th class="sortable" id='clientName' >Client Name</th>
</tr>
</thead>
<tbody style="font-size: 18px;font-family: 'HelveticaNeue-Medium';">
<c:forEach items="${clientAccountsList}" var="clientAccount">
<tr>
<td><div class="checkBoxSel"><form:checkbox path="clientName" value="${clientAccount.clientName}"/> </div></td>
<td>${clientAccount.clientName}</td>
</tr>
</c:forEach>
</table>
</form:form>
</div>
</body>
when above code executes i get list of clients .. now i want to select few client and click on client-user map ... those values should dispaly as popup...
I have written another jsp where selected client appears..
here is clientusermap.jsp
<link rel="stylesheet" type="text/css" href="/css/clientusermap.css" />
<html>
<head>
<script>
$("#baseDiv").click(function(e) {
$("#popUpDiv").show();
});
</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<%#taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
</head>
<body>
<div class="tcc" style="min-height:620px; width:100%;float:left;">
<form:form modelAttribute="clientAccounts">
<table border="0">
<tr>
<tr>
<td class = "select">select user :
</td>
<td ALIGN="center">
<select>
</select>
</td>
</tr>
<tr>
<td class = "select">List of Clients :
</td>
<td ALIGN="center">
<div id="popUpDiv">
<form:select path="clientName" id="selectPopUp">
<form:option value="-1">Select</form:option>
<form:options items="${clientNameList}" />
</form:select>
</div>
</td>
</tr>
</TR>
</table>
</form:form>
<input TYPE="submit" VALUE="save">
<input TYPE="reset" VALUE="cancle">
</div>
</body>
</html>
Screen capture
I have been trying to use set up this table here. http://www.ajaxblender.com/demos/tables/sortabletable/
I checked with my browser and the page is properly pulling the css and the .js files yet it gives me this error in reference to my sortabletable.js file
(screen shot of the error)
http://i.imgur.com/iJa2Rz8.png
Here is a copy of the relevant part of the source code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
<title>Home page</title>
<link rel="stylesheet" href="./_common/css/main.css" type="text/css" media="all">
<link href="sortableTable.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="./_common/js/mootools.js"></script>
<script type="text/javascript" src="sortableTable.js"></script>
</head>
<body>
<div id="container">
<div id="example">
<div class="tableFilter">
<form id="tableFilter" onsubmit="myTable.filter(this.id); return false;">Filter:
<select id="column">
<option value="1">Firstname</option>
<option value="2">Lastname</option>
<option value="3">Department</option>
<option value="4">Start Date</option>
</select>
<input type="text" id="keyword" />
<input type="submit" value="Submit" />
<input type="reset" value="Clear" />
</form>
</div>
<table id="myTable" cellpadding="0" cellpadding="0">
<thead>
<th axis="number">ID</th>
<th axis="string">Firstname</th>
<th axis="string">Lastname</th>
<th axis="string">Department</th>
<th axis="date">Start Date</th>
</thead>
<tbody>
<tr id="1">
<td class="rightAlign">1</td>
<td>Sam</td>
<td>Birch</td>
<td>Programming</td>
<td class="rightAlign">01/06/00</td>
</tr>
<tr id="2">
<td class="rightAlign">2</td>
<td>George</td>
<td>Lo</td>
<td>Support</td>
<td class="rightAlign">01/07/99</td>
</tr>
<tr id="3">
<td class="rightAlign">3</td>
<td>kevin</td>
<td>Walker</td>
<td>Programming</td>
<td class="rightAlign">01/06/05</td>
</tr>
<tr id="4">
<td class="rightAlign">4</td>
<td>Peter</td>
<td>Aland</td>
<td>Project Management</td>
<td class="rightAlign">23/10/06</td>
</tr>
<tr id="5">
<td class="rightAlign">5</td>
<td>Rachel</td>
<td>Dickinson</td>
<td>Design</td>
<td class="rightAlign">20/01/05</td>
</tr>
<tr id="6">
<td class="rightAlign">6</td>
<td>John</td>
<td>Tsang</td>
<td>Support</td>
<td class="rightAlign">05/10/05</td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
<script type="text/javascript">
var myTable = {};
window.addEvent('domready', function(){
myTable = new sortableTable('myTable', {overCls: 'over', onClick: function(){alert(this.id)}});
});
</script>
</div>
</div>
</div>
</body>
</html>
any thoughts on what it could be?
Use $.find('tbody') to get all descendant tbodys and $.children('tbody') to get all children tbodys. Try this:
this.thead = this.table.children('thead');
this.tbody = this.table.children('tbody');
this.tfoot = this.table.children('tfoot');
this.elements = this.table.find('tr');
Altough I don't see jQuery being loaded in your HTML sample, your question's title suggests that your are using jQuery in your site. If that's the case, your problem would be that there's a conflict between Mootools and jQuery because both libraries defines the $ function. To fix the issue, you will have to use jQuery.noConflict().