HTML: change background row base on value - javascript

I've a table in HTML page and I want to color all the row in red when its first column gets a particular value.
I read something about that on StackOverflow and I added these two attributes (border-collapse and border-spacing) to my table
<table id="my-table" style="border-collapse:collapse; border-spacing:0 1px">
Now, in my JavaScript function, how can I set the background color in base of new value?
I tryied with theese:
if (value == 'broken') {my-table[i].css('background-color','red');} // OR
if (value == 'broken') {my-table[i].cells.style.background = 'red';}
where i is the index of the row I'm considering for. Nothing changes! Anyone can give me an advice? Thank you.

The following sample demonstrates a walk through an table...
you can adapt this to your sample...
You can also use the table Object...
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Table key´s</title>
<style>
td{width:10px;height:10px;background:#ddd;}
tr:nth-child(5) td:nth-child(5){background:#f00;}
</style>
</head>
<body>
<div id="tableContainer">
</div>
<script>
var row=col=5,max=10;
tableContainer.innerHTML = '<table>'+('<tr>'+'<td>'.repeat(max)).repeat(max)+'</table>';
window.addEventListener("keyup", function(e){
var colDiff, rowDiff;
var keyMap = new Map([[37,[-1,0]],[38,[0,-1]],[39,[1,0]],[40,[0,1]]]);
if (keyMap.has(e.keyCode)){
document.querySelector(`tr:nth-child(${row}) td:nth-child(${col})`).style.background='#ddd';
[colDiff,rowDiff]=keyMap.get(e.keyCode);
row+=rowDiff;
col+=colDiff;
row = (row>max) ? max : (row < 1) ? 1 : row;
col = (col>max) ? max : (col < 1) ? 1 : col;
document.querySelector(`tr:nth-child(${row}) td:nth-child(${col})`).style.background='#f00';
}
})
</script>
</body>
</html>

use document.getElementById and use a variable, it'll make life easier
e.g.
var bgtable = document.getElementById("my-table").getElementsByTagName("tr");
bgtable[i].style.backgroundColor = "red";
Also check your console for any errors and check that i 1) is being filled and 2) has the correct value.

In order to style a particular row's background color you need to set the css on the tr element. Without more context on where value is defined I can't really give you a specific code example.
Here is an example where I decide if a row is "broken" based on a data attribute set on the tr:
$("tbody tr", $("#my-table")).each(function() {
var tr = $(this);
if (tr.data("broken") == true) {
tr.css({
"background-color": "red"
})
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="my-table" style="border-collapse:collapse; border-spacing:0 1px">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr data-broken="true">
<td>Value 1</td>
<td>Value 2</td>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
</tr>
</tbody>
</table>

Related

How to find the id with the greatest value

I'm developing an ASP.NET MVC web page using Razor. Versions are Microsoft.AspNet.Mvc 5.2.3, Microsoft.AspNet.Razor 3.2.3, .NET Framework 4.7, C# and Javascript.
A view will have a table with these rows:
<tr id="level01_01"> ... </tr>
<tr id="level01_02"> ... </tr>
<tr id="level01_03"> ... </tr>
I need to know with jQuery which is the id for the latest row. In the above example is level01_03.
I create these rows with C# so I can add the input hidden with the latest id as value.
If I want to find it without an input hidden, I don't know how to do it. In this SO answer I've found how to get an id with a value greater than other, but this is not what I'm looking for:
<div id="div22" class="fade">text</div>
<div id="div35" class="fade">text</div>
<div id="div40" class="fade">text</div>
then jQuery
var divs = $('.fade').map(function(){
if (this.id.replace('div','') > 35) return '#'+this.id;
}).get().join(',');
$(divs).fadeTo("slow", 0.6);
BUT THIS IS NOT WHAT I'M LOOKING FOR.
I'm looking to get the id with the greatest number. In this example the id is level01_03.
How can I get the id with the greatest id?
You can use this to return the highest id value.
var ids = $("tr[id^='level01_']").map(function() {
return parseInt(this.id.replace("level01_", ""), 10);
}).get();
var highest = Math.max.apply(Math, ids);
console.log(highest)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr id="level01_01"> ... </tr>
<tr id="level01_02"> ... </tr>
<tr id="level01_03"> ... </tr>
</table>
There's several possible ways of doing this.
Firstly, assuming that the highest id will be the last one, you can just get the tr:last and read it's id:
var lastId = $('table tr:last').prop('id').spit('_')[1];
Alternatively, if the values are incremental you can just count the total number of tr elements:
var lastId = $('table tr').length;
Finally, if they are not in order you can use map() to build an array of the values, then Math.max to get the highest:
var highestId = Math.max.apply(Math, $('table tr').map(function() {
return parseInt(this.id.split('_')[1], 10);
}).get());
console.log(highestId);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr id="level01_10"></tr>
<tr id="level01_221"></tr>
<tr id="level01_3"></tr>
</table>
This function will set $el to the row with the highest valued Id.
var $el, max = 0;
$("tr").each(function() {
var i = parseInt(this.id.replace(/.*_(\d+)$/, "$1"));
if (i > max) {
max = i;
$el = $(this);
}
});
Use jQuery.filter
var divs = $('.fade').filter(function() {
return (+this.id.replace('div', '') > 35);
});
$(divs).fadeTo("slow", 0.6);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="div22" class="fade">text</div>
<div id="div35" class="fade">text</div>
<div id="div40" class="fade">text</div>
To get filtered IDs:
var divs = $('.fade').filter(function() {
return (+this.id.replace('div', '') > 35);
}).map(function() {
return this.id;
});
console.log(divs.get());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="div22" class="fade">text</div>
<div id="div35" class="fade">text</div>
<div id="div40" class="fade">text</div>
if your TR having ascending ID than you can simply get last TR id like:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Title Goes Here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function () {
alert($("#tbl tr:last").attr("id"));
});
</script>
</head>
<body>
<table class="data" id="tbl">
<tr id="level01_01">
<th>Entry Header 1</th>
<th>Entry Header 2</th>
<th>Entry Header 3</th>
<th>Entry Header 4</th>
</tr>
<tr id="level01_02">
<td>Entry First Line 1</td>
<td>Entry First Line 2</td>
<td>Entry First Line 3</td>
<td>Entry First Line 4</td>
</tr>
<tr id="level01_03">
<td>Entry Line 1</td>
<td>Entry Line 2</td>
<td>Entry Line 3</td>
<td>Entry Line 4</td>
</tr>
<tr id="level01_04">
<td>Entry Last Line 1</td>
<td>Entry Last Line 2</td>
<td>Entry Last Line 3</td>
<td>Entry Last Line 4</td>
</tr>
</table>
</body>
</html>
You can achieve by comparing id as string like this code below:
var max = '';
$("#test tr").each(function() {
if (this.id.localeCompare(max) > 0) {
max = this.id;
}
});
console.log(max)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="test">
<tr id="level01_01"> ... </tr>
<tr id="level01_02"> ... </tr>
<tr id="level01_153"> ... </tr>
<div id="res"></div>
</table>

Hide rows in table B which already appear in table A

Using this code :
var table1 = $('#TableA').find('td:eq(1)').text();
var table2 = $("#TableB tr:gt(0)");
table2.each(function (i) {
var tds = $(this).children('td');
var type= +tds.eq(0).text();
var price = +tds.eq(1).text();
if (price == table1) {
var myTable = table2.filter(function () {
var tds = $(this).children('td');
})
myTable.add(this).hide()
}
})
My Html Page Structure
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<table id="TableA">
<tr>
<th>Type</th>
<th>Price</th>
<th>Quantity</th>
<th>Ref No</th>
</tr>
<tr>
<td>Mouse</td>
<td>50</td>
<td>6</td>
<td>#101255</td>
</tr>
<tr>
<td>Speaker</td>
<td>300</td>
<td>6</td>
<td>#21165</td>
</tr>
</table>
<table id="TableB">
<tr>
<th>Type</th>
<th>Price</th>
<th>Quantity</th>
<th>Ref No</th>
</tr>
<tr>
<td>Mouse</td>
<td>50</td>
<td>6</td>
<td>#101255</td>
</tr>
<tr>
<td>Speaker</td>
<td>300</td>
<td>6</td>
<td>#21165</td>
</tr>
<tr>
<td>Keyboard</td>
<td>150</td>
<td>7</td>
<td>#31234</td>
</tr>
</table>
</body>
</html>
"The second table in the images is the Table B"
My Table B changes from this :
Before
To this : After
Now my problem is, only one row is hidden. The row, where "speaker" is, is still displayed. I know that I must use a loop for this, but I don't where to implement the loop and how. I'm a newbie programmer and I know that I need more practice. Please Help Thank you in advance
<script type="text/javascript">
$('body').click(function(e){
var table1_tr = $('#TableA').find('tr'); <!--get the rows of first table-->
var table2 = $("#TableB tr:gt(0)");
table1_tr.each(function(i,e){ <!-- loop through rows of first table -->
var table1 = $(e).find('td:eq(1)').text();
table2.each(function (i) {
var tds = $(this).children('td');
var type= +tds.eq(0).text();
var price = +tds.eq(1).text();
if (price == table1) {
var myTable = table2.filter(function () {
var tds = $(this).children('td');
})
myTable.add(this).hide()
}
});
})
});
</script>
you are checking the text of price in the first row of first table with td text of all the rows of second table
I modified script to loop through rows of first table and check them with all rows of second table
Hope this helps

handle mdl table check box

I'm using material desigin lite in my website
I have implemented this example:
http://www.getmdl.io/components/index.html#tables-section
<table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp">
<thead>
<tr>
<th class="mdl-data-table__cell--non-numeric">Material</th>
<th>Quantity</th>
<th>Unit price</th>
</tr>
</thead>
<tbody>
<tr>
<td class="mdl-data-table__cell--non-numeric">Acrylic (Transparent)</td>
<td>25</td>
<td>$2.90</td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">Plywood (Birch)</td>
<td>50</td>
<td>$1.25</td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">Laminate (Gold on Blue)</td>
<td>10</td>
<td>$2.35</td>
</tr>
</tbody>
</table>
my question is how to handle the check box in the table , they are added by the class : .mdl-data-table--selectable
there is no Id or class for them so what is the way to use them in javascript or sql server (deleting rows what i'm trying to implement)
You could check if they're are clicked with a jquery on method, why am not using the normal .click is to because of event delegation. Jquery docs do a perfect job explaining that.
Before I explain how I did it I will have a snippet that you can immediately play with under my explanation.
I basically used inspect element to look at the tables structure and it looked something like this
<tr>
<td>
<label>clickable checkbox code</label>
</td>
<td>Acrylic</td>
<td>25</td>
<td>$2.90</td>
With that information, we can do a lot. I personally used this to listen to clicks.
$(document).on("click",".mdl-checkbox__ripple-container.mdl-js-ripple-effect.mdl-ripple--center", function() { /* Code here*/ });
And with jquery parents & children methods we can achieve a lot, like read the content of all the table data with the following code in our click event listener
foo = $(this).parents().eq(2).children().text();
Or we can perhaps delete a whole row?
$(this).parents().eq(2).fadeOut();
What that would do is, look at the clicked checkbox using "this" as reference. Then go to levels up and remove a whole row.
<tr><!-- eq 2 -->
<td> <!-- eq 1 -->
<label>clickable checkbox code</label>
</td>
<td>Acrylic</td>
<td>25</td>
<td>$2.90</td>
Or we can check for the content of a specific child like this
var secondChildContent = $(this).parents().eq(2).children().eq(2).text();
Where secondChildContent will be return the content. You can always change the eq (The one after children) value to the desired child number you want. In the following case secondChildContent would return "Acrylic"
<tr>
<td> <!-- eq 1 -->
<label>clickable checkbox code</label>
</td>
<td>Acrylic</td> <!-- eq 2 -->
<td>25</td> <!-- eq 3 -->
<td>$2.90</td> <!-- eq 4 -->
$(document).ready(function() {
$(document).on("click", ".mdl-checkbox__ripple-container.mdl-js-ripple-effect.mdl-ripple--center", function() {
//Removing row
$(this).parents().eq(2).delay(500).fadeOut(300);
var secondChildContent = $(this).parents().eq(2/*child number*/).children().eq(2).text();
var allChildrenContent = $(this).parents().eq(2).children().text();
var parentID = $(this).parents().eq(2).attr('id');
//Removing table on click of first checkbox
if (parentID == "header") {
$("#mdlTable").fadeOut(1000);
$("#log").html("<b>Table removed!</b>");
} else {
//Don't pay attention to this
$("#log").html(
"<b>Second child content is: </b>" + secondChildContent +
"<br><b>All children content is: </b>" + allChildrenContent
)
}
});
});
#log,
#mdlTable {
margin: 1% 1% 1% 1%;
}
<!DOCTYPE html>
<html>
<head>
<title>Table</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.4/material.indigo-pink.min.css">
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.4/material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<table id="mdlTable" class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp">
<thead>
<tr id="header">
<th class="mdl-data-table__cell--non-numeric">Material</th>
<th>Quantity</th>
<th>Unit price</th>
</tr>
</thead>
<tbody>
<tr>
<td class="mdl-data-table__cell--non-numeric">Acrylic (Transparent)</td>
<td>25</td>
<td>$2.90</td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">Plywood (Birch)</td>
<td>50</td>
<td>$1.25</td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">Laminate (Gold on Blue)</td>
<td>10</td>
<td>$2.35</td>
</tr>
</tbody>
</table>
<div id="log"></div>
</body>
When a checkbox is selected, the tr gets the class "is-checked" with Material Design Lite.
So your jquery can be like this:
$("table").find("tr.is-checked").each(function(){
// Do some stuff!
});
Update: Just read that the class "mdl-data-table--selectable " is being deprecated... This is the article on github
You can use this OnClick API function.
It uses like Android onClickListener, but it is for JavaScript.
TablesOnClickListener = function() {
var fun;
this.setOnClickListener = function(listener) {
fun = listener;
$(document).on("click", ".mdl-checkbox__ripple-container.mdl-js-ripple-effect.mdl-ripple--center", function() {
//$(this).parents().eq(2).delay(500).fadeOut(300);
var secondChildContent = $(this).parents().eq(2 /*child number*/ ).children().eq(2).text();
var allChildrenContent = $(this).parents().eq(2).children().text();
var parentID = $(this).parents().eq(2).attr('id');
fun({
sen: secondChildContent,
text: allChildrenContent,
id: parentID
});
});
}
How to use:
Step 1: create new TablesOnClickListener
var tocl = new TablesOnClickListener()
Step 2: set Item OnClickListener
tocl.setOnClickListener(function(data){
console.log(data);
});
Now your Tables Item Listener are all set!

Is it possible to find number of td's within table and then apply col width inside table tag by using Javascript?

Is it possible to add "col width" tag according to number of td tags, within Table tag. if there are 2 td's,then it should add 2 "col width". & if there are 3 then, 3 "col width". and so on.
<!DOCTYPE html>
<html>
<head>
<title>HTML colgroup Tag</title>
</head>
<body>
<p>This example shows a colgroup that has three columns of different widths:
</p>
<table border="1">
<tr>
<th>Heading</th>
<td>col 1</td>
<td>col 2</td>
<td>col 3</td>
</tr>
</table>
<table border="1">
<tr>
<td>col 1</td>
<td>col 2</td>
</tr>
</table>
</body>
</html>
Please can anyone help me,to add "col group" tag according to number of td.
Expected Output:-
<!DOCTYPE html>
<html>
<head>
<title>HTML colgroup Tag</title>
</head>
<body>
<p>This example shows a colgroup that has three columns of different widths:
</p>
<table border="1">
<colgroup>
<col width="50%"></col>
<col width="20%"></col>
<col width="30%"></col>
</colgroup>
<tr>
<th>Heading</th>
<td>col 1</td>
<td>col 2</td>
<td>col 3</td>
</tr>
</table>
<table border="1">
<colgroup>
<col width="50%"></col>
<col width="50%"></col>
</colgroup>
<tr>
<td>col 1</td>
<td>col 2</td>
</tr>
</table>
</body>
</html>
you need to first loop through the tables and get the td count for each table. and then create a colgroup based on the count of td's
something like this
var output = '';
$('table').each(function() {
var colCount = 0;
$(this).find('tr:nth-child(1) td').each(function() { // Get the count of table columns
if ($(this).attr('colspan')) { // if there is a <td colspan>
colCount += +$(this).attr('colspan');
} else {
colCount++;
}
console.log($(this));
});
var colgroupList = '';
for (i = 0; i < colCount; i++) { // Add a <colgroup></colgroup> for each <td>
colgroupList += '<col width="50%"></col>';
console.log(colgroupList);
}
console.log('<colgroup>' + colgroupList + '</colgroup>');
$(this).find("tbody").prepend('<colgroup>' + colgroupList + '</colgroup>');
output += $(this).html();
});
here's a working JSFIDDLE for the same.
In jQuery you can count the number of tds in the table by:
var count = $('#tableId td').length();
You can add atrributes to a table by doing:
$('#tableId').attr('name', 'value');
jQuery('table').each(function(){
var t = jQuery(this);
var count = t.children('tr').eq(0).find('td').length;
var colgroup = jQuery('<colgroup/>', { 'span': count });
for(var i = 1; i <= count; i++){
colgroup.append('<col/>',{ 'width' : (100/count)+'%' };
}
t.prepend(colgroup);
});
Untested but should be a good starting point
Yes, you can use jQuery to make things easy.
Here is an example (I used the id "table1" in the table):
$(document).ready(function () {
var size = $("#table1 tr:first > td").length;
var tg = '<colgroup span="' + size + '">';
for(x=0; x<size; x++) {
tg += '<col></col>';
}
tg += '</colgroup>';
$(tg).insertBefore('#table1 > tbody > tr:first');
});
Hope it helps.

How to get html table td cell value by JavaScript?

I have an HTML table created with dynamic data and cannot predict the number of rows in it. What I want to do is to get the value of a cell when a row is clicked. I know to use td onclick but I do not know how to access the cell value in the Javascript function.
The value of the cell is actually the index of a record and it is hidden in the table. After the record key is located I can retrieve the whole record from db.
How to get the cell value if I do not know the row index and column index of the table that I clicked?
Don't use in-line JavaScript, separate your behaviour from your data and it gets much easier to handle. I'd suggest the following:
var table = document.getElementById('tableID'),
cells = table.getElementsByTagName('td');
for (var i=0,len=cells.length; i<len; i++){
cells[i].onclick = function(){
console.log(this.innerHTML);
/* if you know it's going to be numeric:
console.log(parseInt(this.innerHTML),10);
*/
}
}
var table = document.getElementById('tableID'),
cells = table.getElementsByTagName('td');
for (var i = 0, len = cells.length; i < len; i++) {
cells[i].onclick = function() {
console.log(this.innerHTML);
};
}
th,
td {
border: 1px solid #000;
padding: 0.2em 0.3em 0.1em 0.3em;
}
<table id="tableID">
<thead>
<tr>
<th>Column heading 1</th>
<th>Column heading 2</th>
<th>Column heading 3</th>
<th>Column heading 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>43</td>
<td>23</td>
<td>89</td>
<td>5</td>
</tr>
<tr>
<td>4</td>
<td>3</td>
<td>0</td>
<td>98</td>
</tr>
<tr>
<td>10</td>
<td>32</td>
<td>7</td>
<td>2</td>
</tr>
</tbody>
</table>
JS Fiddle proof-of-concept.
A revised approach, in response to the comment (below):
You're missing a semicolon. Also, don't make functions within a loop.
This revision binds a (single) named function as the click event-handler of the multiple <td> elements, and avoids the unnecessary overhead of creating multiple anonymous functions within a loop (which is poor practice due to repetition and the impact on performance, due to memory usage):
function logText() {
// 'this' is automatically passed to the named
// function via the use of addEventListener()
// (later):
console.log(this.textContent);
}
// using a CSS Selector, with document.querySelectorAll()
// to get a NodeList of <td> elements within the #tableID element:
var cells = document.querySelectorAll('#tableID td');
// iterating over the array-like NodeList, using
// Array.prototype.forEach() and Function.prototype.call():
Array.prototype.forEach.call(cells, function(td) {
// the first argument of the anonymous function (here: 'td')
// is the element of the array over which we're iterating.
// adding an event-handler (the function logText) to handle
// the click events on the <td> elements:
td.addEventListener('click', logText);
});
function logText() {
console.log(this.textContent);
}
var cells = document.querySelectorAll('#tableID td');
Array.prototype.forEach.call(cells, function(td) {
td.addEventListener('click', logText);
});
th,
td {
border: 1px solid #000;
padding: 0.2em 0.3em 0.1em 0.3em;
}
<table id="tableID">
<thead>
<tr>
<th>Column heading 1</th>
<th>Column heading 2</th>
<th>Column heading 3</th>
<th>Column heading 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>43</td>
<td>23</td>
<td>89</td>
<td>5</td>
</tr>
<tr>
<td>4</td>
<td>3</td>
<td>0</td>
<td>98</td>
</tr>
<tr>
<td>10</td>
<td>32</td>
<td>7</td>
<td>2</td>
</tr>
</tbody>
</table>
JS Fiddle proof-of-concept.
References:
Array.prototype.forEach().
document.getElementById().
document.getElementsByTagName().
document.querySelectorAll().
EventTarget.addEventListener().
Function.prototype.call().
This is my solution
var cells = Array.prototype.slice.call(document.getElementById("tableI").getElementsByTagName("td"));
for(var i in cells){
console.log("My contents is \"" + cells[i].innerHTML + "\"");
}
You can use:
<td onclick='javascript:someFunc(this);'></td>
With passing this you can access the DOM object via your function parameters.
I gave the table an id so I could find it. On onload (when the page is loaded by the browser), I set onclick event handlers to all rows of the table. Those handlers alert the content of the first cell.
<!DOCTYPE html>
<html>
<head>
<script>
var p = {
onload: function() {
var rows = document.getElementById("mytable").rows;
for(var i = 0, ceiling = rows.length; i < ceiling; i++) {
rows[i].onclick = function() {
alert(this.cells[0].innerHTML);
}
}
}
};
</script>
</head>
<body onload="p.onload()">
<table id="mytable">
<tr>
<td>0</td>
<td>row 1 cell 2</td>
</tr>
<tr>
<td>1</td>
<td>row 2 cell 2</td>
</tr>
</table>
</body>
</html>
.......................
<head>
<title>Search students by courses/professors</title>
<script type="text/javascript">
function ChangeColor(tableRow, highLight)
{
if (highLight){
tableRow.style.backgroundColor = '00CCCC';
}
else{
tableRow.style.backgroundColor = 'white';
}
}
function DoNav(theUrl)
{
document.location.href = theUrl;
}
</script>
</head>
<body>
<table id = "c" width="180" border="1" cellpadding="0" cellspacing="0">
<% for (Course cs : courses){ %>
<tr onmouseover="ChangeColor(this, true);"
onmouseout="ChangeColor(this, false);"
onclick="DoNav('http://localhost:8080/Mydata/ComplexSearch/FoundS.jsp?courseId=<%=cs.getCourseId()%>');">
<td name = "title" align = "center"><%= cs.getTitle() %></td>
</tr>
<%}%>
........................
</body>
I wrote the HTML table in JSP.
Course is is a type. For example Course cs, cs= object of type Course which had 2 attributes: id, title.
courses is an ArrayList of Course objects.
The HTML table displays all the courses titles in each cell. So the table has 1 column only:
Course1
Course2
Course3
......
Taking aside:
onclick="DoNav('http://localhost:8080/Mydata/ComplexSearch/FoundS.jsp?courseId=<%=cs.getCourseId()%>');"
This means that after user selects a table cell, for example "Course2", the title of the course- "Course2" will travel to the page where the URL is directing the user: http://localhost:8080/Mydata/ComplexSearch/FoundS.jsp . "Course2" will arrive in FoundS.jsp page. The identifier of "Course2" is courseId. To declare the variable courseId, in which CourseX will be kept, you put a "?" after the URL and next to it the identifier.
It works.

Categories