Saturday, 22 January 2011

Simple CRUD Tutorial - 6

This issue will provide two examples for selecting
a row from an HTML table.

The first table is static. A selectRow(i) function is
trigged through the onClick event when a row is clicked.
The SelectRow function iterates through all the td's
of the related line and sets the color to the selected
color. It also keeps track of the previous row so that
it can reset its color to the normal row color.


staticTableSelect.jsp
---------------------
<%--
Document : staticTableSelect
Created on : 18.Oca.2011, 22:14:13
Author : Ali Riza SARAL
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<style type="text/css">
span.title{
background-color: white;
color: #2470B3;
font-size: larger;
padding-top:5px;
padding-bottom:2px;
}

</style>

<link rel="stylesheet" type="text/css" href="tableARS.css" />

<script type='text/javascript'>
var currentRow=-1;

function SelectRow(newRow)
{
for(var i=1;i<5;++i)
{
var cell=document.getElementById('td_'+newRow+','+i);
cell.style.background='#A3D0F7';
if(currentRow!=-1)
{
var cell=document.getElementById('td_'+currentRow+','+i);
cell.style.background='whitesmoke';
}
}
currentRow=newRow;
}
</script>
<title>Ali R+ Static Table Select Row Prototype </title>
</head>

<body>

<table width="70%">

<tr align="center" >
<span class="title">Ali R+ Static Table Select Row Prototype </span><br />
</tr>
<tr>
<th>First Column</th>
<th>Second Column</th>
<th>Third Column</th>
<th>Fourth Column</th>
</tr>

<tr>
<td onclick='SelectRow(1)' id='td_1,1'>td(1,1)</td>
<td onclick='SelectRow(1)' id='td_1,2'>td(1,2)</td>
<td onclick='SelectRow(1)' id='td_1,3'>td(1,3)</td>
<td onclick='SelectRow(1)' id='td_1,4'>td(1,4)</td>
</tr>

<tr>
<td onclick='SelectRow(2)' id='td_2,1'>td(2,1)</td>
<td onclick='SelectRow(2)' id='td_2,2'>td(2,2)</td>
<td onclick='SelectRow(2)' id='td_2,3'>td(2,3)</td>
<td onclick='SelectRow(2)' id='td_2,4'>td(2,4)</td>
</tr>

<tr>
<td onclick='SelectRow(3)' id='td_3,1'>td(3,1)</td>
<td onclick='SelectRow(3)' id='td_3,2'>td(3,2)</td>
<td onclick='SelectRow(3)' id='td_3,3'>td(3,3)</td>
<td onclick='SelectRow(3)' id='td_3,4'>td(3,4)</td>
</tr>
</table>
</body>
</html>


tableARS.css
------------
table
{
position:fixed;
top:50px;
left:50px;
}
table, td, th
{
border:1px groove #ccccff ;
border-collapse:collapse;
}
th
{
background-color:#E3F6CE;
color: #ff9999;
}
td
{
background-color: whitesmoke;
color: black;
}

The dinamic table select example creates the rows via
an algorithm. It uses a small string array of 3 elements.
The table has only 2 columns, the elemnt and its sequence.

dinamicTableSelect.jsp
----------------------
<%--
Document : dinamicTableSelect
Created on : 19.Oca.2011, 20:15:28
Author : Ali Riza SARAL
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<style type="text/css">
span.title{
background-color: white;
color: #2470B3;
font-size: larger;
padding-top:5px;
padding-bottom:2px;
}
</style>

<link rel="stylesheet" type="text/css" href="tableARS.css" />

<script type='text/javascript'>
var currentRow=-1;

function SelectRow(newRow)
{
for(var j=1;j<3;++j)
{
var cell=document.getElementById('cell_'+newRow+','+j);
cell.style.background='#A3D0F7';
if(currentRow!=-1)
{
var cell=document.getElementById('cell_'+currentRow+','+j);
cell.style.background='whitesmoke';
}
}
currentRow=newRow;
}
</script>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ali R+ Dinamic Table Select Row Prototype</title>
</head>

<body>
<%
String[] items = {"a", "b", "c"};
String item = items[0];
%>

<table width="40%">

<tbody>
<tr align="center">
<span class="title">Ali R+ Static Table Select Row Prototype </span>
</tr>
<tr>
<th>First Column</th>
<th>Second Column</th>
</tr>
<%
for (int i = 0, oddEv = 0;;) { //for all the elements of the data
%>
<tr>
<TD onclick='SelectRow(<%=(i + 1)%>)' id='cell_<%=i + 1%>,1'>
<%= i%></TD>
<TD onclick='SelectRow(<%=(i + 1)%>)' id='cell_<%=i + 1%>,2'>
<%= item.toString()%></TD>
</tr>
<%
i++;

try {
item = items[i];
} catch (java.lang.ArrayIndexOutOfBoundsException _e0) {
break;
}
} //for all the elements of the data
%>
</tbody>

</table>
</body>
</html>


As seen selectRow is trigged for <%=(i + 1)%> and the cell name
is also dinamic, id='cell_<%=i + 1%>,1'.
Posted by at