We Keep Coding

HTML table rows navigate by keyboard in JQuery

I have a HTML table which is created by Ajax. Rendered markup of this table as below:
<table class="table" id="tbl_byKeyboard">
<thead>
<tr>
<th>#</th>
<th>Date</th>
<th>Customer</th>
<th>Discount</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="radio" name="bid" value="122">
</td>
<td>2022-10-01</td>
<td>Customer 01</td>
<td>10%</td>
<td>1000.00</td>
</tr>
<tr>
<td>
<input type="radio" name="bid" value="123">
</td>
<td>2022-10-01</td>
<td>Customer 02</td>
<td>10%</td>
<td>2000.00</td>
</tr>
<tr>
<td>
<input type="radio" name="bid" value="124">
</td>
<td>2022-10-01</td>
<td>Customer 03</td>
<td>10%</td>
<td>3000.00</td>
</tr>
</tbody>
</table>
Using this table, basically I want to navigate the table row using 'up' and 'down' arrow key on keyboard. After selecting the right row, the user should be able to check the radio button (within the selected row) by pressing the enter key.
This is my jQuery code sofar :
$(document).ready(function() {
$(document).on('click', "#tbl_byKeyboard tbody tr", function(e) {
var inp = this.querySelector('input')
if (inp == null) return
if (e.target.tagName != "INPUT") {
inp.checked = !inp.checked
}
$('#tbl_byKeyboard tbody tr').removeClass('active');
$(this).addClass('active');
})
});
$(window).on('keydown', tbl_navigate)
function tbl_navigate(e) {
var $tbl = $('#tbl_byKeyboard');
var $cur = $('.active', $tbl).removeClass('active').first();
if (e.keyCode === 40) { //down
if ($cur.length) {
$cur.next().addClass('active');
} else {
$tbl.children().first().addClass('active');
}
} else if (e.keyCode == 38) { //up
if ($cur.length) {
$cur.prev().addClass('active');
} else {
$tbl.children().last().addClass('active');
}
} else if (e.keyCode == 13) { //enter
var $this = $cur;
var inp = $this.find('input')
if (inp == null) return
if (inp.is(':checked')) {
inp.prop('checked', false);
} else {
inp.prop('checked', true);
$('#tbl_byKeyboard tbody tr').removeClass('active');
$this.addClass('active');
}
}
}
Stack snippet:
$(document).ready(function() {
$(document).on('click', "#tbl_byKeyboard tbody tr", function(e) {
var inp = this.querySelector('input')
if (inp == null) return
if (e.target.tagName != "INPUT") {
inp.checked = !inp.checked
}
$('#tbl_byKeyboard tbody tr').removeClass('active');
$(this).addClass('active');
})
});
$(window).on('keydown', tbl_navigate)
function tbl_navigate(e) {
var $tbl = $('#tbl_byKeyboard');
var $cur = $('.active', $tbl).removeClass('active').first();
if (e.keyCode === 40) { //down
if ($cur.length) {
$cur.next().addClass('active');
} else {
$tbl.children().first().addClass('active');
}
} else if (e.keyCode == 38) { //up
if ($cur.length) {
$cur.prev().addClass('active');
} else {
$tbl.children().last().addClass('active');
}
} else if (e.keyCode == 13) { //enter
var $this = $cur;
var inp = $this.find('input')
if (inp == null) return
if (inp.is(':checked')) {
inp.prop('checked', false);
} else {
inp.prop('checked', true);
$('#tbl_byKeyboard tbody tr').removeClass('active');
$this.addClass('active');
}
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table" id="tbl_byKeyboard">
<thead>
<tr>
<th>#</th>
<th>Date</th>
<th>Customer</th>
<th>Discount</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="radio" name="bid" value="122">
</td>
<td>2022-10-01</td>
<td>Customer 01</td>
<td>10%</td>
<td>1000.00</td>
</tr>
<tr>
<td>
<input type="radio" name="bid" value="123">
</td>
<td>2022-10-01</td>
<td>Customer 02</td>
<td>10%</td>
<td>2000.00</td>
</tr>
<tr>
<td>
<input type="radio" name="bid" value="124">
</td>
<td>2022-10-01</td>
<td>Customer 03</td>
<td>10%</td>
<td>3000.00</td>
</tr>
</tbody>
</table>
My problem is, with this code I can navigate table rows using 'up' and 'down' arrow key, but enter key not working for me.
Hope somebody may help me to figure this out.

The problem is, that at the beginning of your keydown handler you remove the class active:
var $cur = $('.active', $tbl).removeClass('active').first();
But in the if for the Enter case you don't set that class again, when the input is checked:
if (inp.is(':checked')) {
inp.prop('checked', false);
}
Furthermore the manipulation of the class isn't necessary in the Enter case - it's only important for the Up and Down keys. Therefor you should remove the active class only in these two cases:
var $cur = $('.active', $tbl).first();
if (e.keyCode === 40) { //down
$cur.removeClass('active');
...
} else if (e.keyCode == 38) { //up
$cur.removeClass('active');
...
}
Because the removal for the Enter case isn't necessary, you can omit it there:
if (inp.is(':checked')) {
inp.prop('checked', false);
} else {
inp.prop('checked', true);
}
Working example:
i added a small line to focus the first radiobutton for demonstration:
$('#tbl_byKeyboard input[type=radio]').eq(0).focus();
$(document).ready(function() {
$('#tbl_byKeyboard input[type=radio]').eq(0).focus();
$(document).on('click', "#tbl_byKeyboard tbody tr", function(e) {
var inp = this.querySelector('input')
if (inp == null) return
if (e.target.tagName != "INPUT") {
inp.checked = !inp.checked
}
$('#tbl_byKeyboard tbody tr').removeClass('active');
$(this).addClass('active');
})
});
$(window).on('keydown', tbl_navigate)
function tbl_navigate(e) {
var $tbl = $('#tbl_byKeyboard');
var $cur = $('.active', $tbl).first();
if (e.keyCode === 40) { //down
$cur.removeClass('active');
if ($cur.length) {
$cur.next().addClass('active');
} else {
$tbl.children().first().addClass('active');
}
} else if (e.keyCode == 38) { //up
$cur.removeClass('active');
if ($cur.length) {
$cur.prev().addClass('active');
} else {
$tbl.children().last().addClass('active');
}
} else if (e.keyCode == 13) { //enter
var $this = $cur;
var inp = $this.find('input')
if (inp == null) return
if (inp.is(':checked')) {
inp.prop('checked', false);
} else {
inp.prop('checked', true);
}
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table" id="tbl_byKeyboard">
<thead>
<tr>
<th>#</th>
<th>Date</th>
<th>Customer</th>
<th>Discount</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="radio" name="bid" value="122">
</td>
<td>2022-10-01</td>
<td>Customer 01</td>
<td>10%</td>
<td>1000.00</td>
</tr>
<tr>
<td>
<input type="radio" name="bid" value="123">
</td>
<td>2022-10-01</td>
<td>Customer 02</td>
<td>10%</td>
<td>2000.00</td>
</tr>
<tr>
<td>
<input type="radio" name="bid" value="124">
</td>
<td>2022-10-01</td>
<td>Customer 03</td>
<td>10%</td>
<td>3000.00</td>
</tr>
</tbody>
</table>

Cannot extract data from TD if there is span in front

I need your help.
Because of the way IE7 chooses to ignore the TD: whitespace: nowrap, I am forced to put and use spans in front of my TD's so here's the delema. When I click on a table row that has no spans in between the td's, the coding is able to extract the data and highlight the row.
However, when I introduce a span in between my td's and click to select a single cell in the table row with the spans's I get the following error: "cells.0 is null or not an object." I know that if I click a little bit off the side of the table cell it works, but I need to be able to also click on the <TD> and <SPAN> areas and have the code work.
Since I am making a table that will have all <span></span>'s in between all the <TD>'s how can the existing coding be reformatted to accomodate the difference from <td>data</td> to <td><span>data</span></td>?
No jQuery please.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#data tr.normal td {
color: #235A81;
background-color: white;
}
#data tr.highlighted td {
color: #FFFFFF;
background-color: #235A81;
}
</style>
<script type='text/javascript'>
function test() {
var table = document.getElementById("data");
var thead = table.getElementsByTagName("thead")[0];
var tbody = table.getElementsByTagName("tbody")[0];
var ishigh
tbody.onclick = function (e) {
e = e || window.event;
var td = e.target || e.srcElement
var row = td.parentNode;
if (ishigh&&ishigh!=row){
ishigh.className='';
}
row.className = row.className==="highlighted" ? "" : "highlighted";
ishigh=row;
getdata(row)
}
document.onkeydown = function(e){
e = e || event;
var code = e.keyCode, rowslim = table.rows.length - 2, newhigh;
if(code === 38){ //up arraow
newhigh = rowindex(ishigh) - 2;
if(!ishigh || newhigh < 0){return GoTo('data', rowslim);}
return GoTo('data', newhigh);
} else if (code === 40){ //down arrow
newhigh = rowindex(ishigh);
if(!ishigh || newhigh > rowslim){return GoTo('data', 0);}
return GoTo('data', newhigh);
}
}
function GoTo(id,nu){
var obj=document.getElementById(id),
trs=obj.getElementsByTagName('TR');
nu = nu + 1;
if (trs[nu]){
if (ishigh&&ishigh!=trs[nu]){
ishigh.className='';
}
trs[nu].className = trs[nu].className=="highlighted" ? "" : "highlighted";
ishigh=trs[nu];
}
getdata(trs[nu]);
}
function rowindex(row){
var rows = table.rows, i = rows.length;
while(--i > -1){
if(rows[i] === row){return i;}
}
}
function getdata(row) {
document.getElementById('firstname').value = row.cells[0].innerHTML;
document.getElementById('lastname').value = row.cells[1].innerHTML;
document.getElementById('age').value = row.cells[2].innerHTML;
document.getElementById('total').value = row.cells[3].innerHTML;
document.getElementById('discount').value = row.cells[4].innerHTML;
document.getElementById('diff').value = row.cells[5].innerHTML;
find_option('fname',row.cells[0].innerHTML)
}
}//end of nested function
function find_option(id,value) {
var sel = document.getElementById(id)
for (var i = 0; i < sel.length; i++){
//alert(sel.options[i].text+" "+sel.options[i].value)
if (sel.options[i].value == value) {
sel.selectedIndex = i;
return
}
}
}
</script>
</head>
<body>
<table id="data" cellspacing="1" border="1">
<thead>
<tr>
<th>first name</th>
<th>last name</th>
<th>age</th>
<th>total</th>
<th>discount</th>
<th>diff</th>
</tr>
</thead>
<tbody>
<tr>
<td><span>peter</span></td>
<td><span>parker</span></td>
<td><span>28</span></td>
<td><span>9.99</span></td>
<td><span>20.3%</span></td>
<td><span>+3</span></td>
</tr>
<tr>
<td>john</td>
<td>hood</td>
<td>33</td>
<td>19.99</td>
<td>25.1%</td>
<td>-7</td>
</tr>
<tr>
<td>clark</td>
<td>kent</td>
<td>18</td>
<td>15.89</td>
<td>44.2%</td>
<td>-15</td>
</tr>
<tr>
<td>bruce</td>
<td>almighty</td>
<td>45</td>
<td>153.19</td>
<td>44%</td>
<td>+19</td>
</tr>
<tr>
<td>benjamin</td>
<td>evans</td>
<td>56</td>
<td>153.19</td>
<td>23%</td>
<td>+9</td>
</tr>
</tbody>
</table>
<br>
Firstname is:
<input type="text" id="firstname" />
<br>Lastname is:
<input type="text" id="lastname" />
<br>Age is:
<input type="text" id="age" />
<br>Total is:
<input type="text" id="total" />
<br>Discount is:
<input type="text" id="discount" />
<br>Diff is:
<input type="text" id="diff" />
<br>
<input type="button" value="testme" onclick="test()">
<br><br>
<select id="fname">
<option value="bruce">bruce</option>
<option value="clark">clark</option>
<option value="benjamin">benjamin</option>
</select>
</body>
</html>

Change this line:
var row = td.parentNode;
to:
var row = (td.tagName == "DIV") ? td.parentNode.parentNode : td.parentNode;

You can look at the elemet's tag name and determine whether the user has clicked on a TD or a SPAN, then adjust select the element's parent (the TD) if you have a span.
var td = e.target || e.srcElement
alert(td.tagName)
Alternately, you can add a CSS class name to all of your SPANS and then check to see if the selected element has that class name. If it does, it's a SPAN, if it doesn't, it's a TD.
I would also suggest using a DIV, not a SPAN.

Populate input boxes based on the clicked/scrolled row in table

I need your help.
With the help of existing javascript experts, I was able to create a table where a user could scoll to (using their up and down arrow keys) as well as to allow a user click on a row to select and highlight it.
Now comes time where i'd like to modify my existing function such that, whenever the user clicks on or uses their arrow keys to navigate to the selected row in the table, id like to pull the information (data) from the row and use it to populate the list of input boxes below. How could the javascript coding be modified so as to allow me to do this?
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#mstrTable tr.normal td {
color: #235A81;
background-color: white;
}
#mstrTable tr.highlighted td {
color: #FFFFFF;
background-color: #235A81;
}
</style>
<script type='text/javascript'>
function test() {
var table = document.getElementById("mstrTable");
var thead = table.getElementsByTagName("thead")[0];
var tbody = table.getElementsByTagName("tbody")[0];
var ishigh;
tbody.onclick = function (e) {
e = e || window.event;
var td = e.target || e.srcElement
var row = td.parentNode;
if (ishigh&&ishigh!=row){
ishigh.className='';
}
row.className = row.className==="highlighted" ? "" : "highlighted";
ishigh=row;
}
document.onkeydown = function(e){
e = e || event;
var code = e.keyCode, rowslim = table.rows.length - 2, newhigh;
if(code === 38){ //up arraow
newhigh = rowindex(ishigh) - 2;
if(!ishigh || newhigh < 0){return GoTo('mstrTable', rowslim);}
return GoTo('mstrTable', newhigh);
} else if (code === 40){ //down arrow
newhigh = rowindex(ishigh);
if(!ishigh || newhigh > rowslim){return GoTo('mstrTable', 0);}
return GoTo('mstrTable', newhigh);
}
}
function GoTo(id,nu){
var obj=document.getElementById(id),
trs=obj.getElementsByTagName('TR');
nu = nu + 1;
if (trs[nu]){
if (ishigh&&ishigh!=trs[nu]){
ishigh.className='';
}
trs[nu].className = trs[nu].className=="highlighted" ? "" : "highlighted";
ishigh=trs[nu];
}
}
function rowindex(row){
var rows = table.rows, i = rows.length;
while(--i > -1){
if(rows[i] === row){return i;}
}
}
}//end of nested function
</script>
</head>
<body>
<table id="mstrTable" cellspacing="1" border="1">
<thead>
<tr>
<th>first name</th>
<th>last name</th>
<th>age</th>
<th>total</th>
<th>discount</th>
<th>diff</th>
</tr>
</thead>
<tbody>
<tr>
<td>peter</td>
<td>parker</td>
<td>28</td>
<td>9.99</td>
<td>20.3%</td>
<td>+3</td>
</tr>
<tr>
<td>john</td>
<td>hood</td>
<td>33</td>
<td>19.99</td>
<td>25.1%</td>
<td>-7</td>
</tr>
<tr>
<td>clark</td>
<td>kent</td>
<td>18</td>
<td>15.89</td>
<td>44.2%</td>
<td>-15</td>
</tr>
<tr>
<td>bruce</td>
<td>almighty</td>
<td>45</td>
<td>153.19</td>
<td>44%</td>
<td>+19</td>
</tr>
<tr>
<td>bruce</td>
<td>evans</td>
<td>56</td>
<td>153.19</td>
<td>23%</td>
<td>+9</td>
</tr>
</tbody>
</table>
<br>
Firstname is:
<input type="text" id="firstname" />
<br>Lastname is:
<input type="text" id="lastname" />
<br>Age is:
<input type="text" id="age" />
<br>Total is:
<input type="text" id="total" />
<br>Discount is:
<input type="text" id="discount" />
<br>Diff is:
<input type="text" id="diff" />
<br>
<input type="button" value="testme" onclick="test()">
</body>
</html>

You can write another function to populate necessary fields. Example:
function populateFields(row) {
el('firstname').value = row.cells[0].innerHTML;
el('lastname').value = row.cells[1].innerHTML;
el('age').value = row.cells[2].innerHTML;
el('total').value = row.cells[3].innerHTML;
el('discount').value = row.cells[4].innerHTML;
el('diff').value = row.cells[5].innerHTML;
}
// el() is shortcut for document.getElementById
Where you pass corresponding row to the function to get data from.
http://jsfiddle.net/dfsq/HDu8n/

Pure Javascript: onClick executes toggle rows -- need image swap

First post, long time looker. Stack Overflow ROCKS!
Need some help. I am primarily a Business Intelligence/Data Warehouse professional. I need to use a bit of Javascript to create a collapsing row report in a report writing tool where I cannot anticipate the ability to call JQuery (Internal LAN deployment). Therefore I need pure Javascript.
The premise is I need the report to open with rows only at the Manager/District level but have the ability to open the District clusters to see the assigned Sales Reps and their contribution.
I found code that does this (quite well actually by hiding the repeating District Manager's name) but it uses text objects ("+" and "--") to render the links behind the OnClick event. I really, really, really, really need to have it show alternating images.
I tried simply modifying these two sections but the code to render the image in the first block does not match the code for the second block, this causes the ternary operation to fail and the images to do not alternate as expected.
lnk.innerHTML =(lnk.innerHTML == "+")?"--":"+";
var link ='+';
The code below contains the working code with text for onClick action and below a simple onClick that switches the images. Essentially I need the Folder Icons to be in the first cell of the Manager/District grids. I forced the working collapse code into the main Javascript block just to save space.
Any help, insight, guidance, electric cattle prod shocks (ouch) would be appreciated.
Thanks in advance.
UPDATE: created a CodePen for this to make it easier to see what works right now:
http://codepen.io/anon/pen/yjLvh
Thanks!
<html>
<head>
<style type="text/css">
table { empty-cells: show; }
cell {font-family:'Calibri';font-size:11.0pt;color: #000000;}
TD{font-family: Calibri; font-size: 10.5pt;}
TH{font-family: Calibri; font-size: 10.5pt; }
</style>
</head>
<body>
<SCRIPT type=text/javascript>
var tbl;
var toggleimage=new Array("http://www.iconlooker.com/user-content/uploads/wall/thumb/misc._icons_open_folder.png","http://www.iconlooker.com/user-content/uploads/wall/thumb/misc._icons_closed_folder.png")
function trim(str){
return str.replace(/^\s*|\s*$/g,"");
}
function getParent(el, pTagName) {
if (el == null) return null;
else if (el.nodeType == 1 && el.tagName.toLowerCase() == pTagName.toLowerCase()) // Gecko bug, supposed to be uppercase
return el;
else
return getParent(el.parentNode, pTagName);
}
function toggleSection(lnk){
var td = lnk.parentNode;
var table = getParent(td,'TABLE');
var len = table.rows.length;
var tr = getParent(td, 'tr');
var rowIndex = tr.rowIndex;
var rowHead=table.rows[rowIndex].cells[1].innerHTML;
lnk.innerHTML =(lnk.innerHTML == "+")?"--":"+";
vStyle =(tbl.rows[rowIndex+1].style.display=='none')?'':'none';
for(var i = rowIndex+1; i < len;i++){
if (table.rows[i].cells[1].innerHTML==rowHead){
table.rows[i].style.display= vStyle;
table.rows[i].cells[1].style.visibility="hidden";
}
}
}
function toggleRows(){
tables =document.getElementsByTagName("table");
for(i =0; i<tables.length;i++){
if(tables[i].className.indexOf("expandable") != -1)
tbl =tables[i];
}
if(typeof tbl=='undefined'){
alert("Could not find a table of expandable class");
return;
}
//assume the first row is headings and the first column is empty
var len = tbl.rows.length;
var link ='+';
var rowHead = tbl.rows[1].cells[1].innerHTML;
for (j=1; j<len;j++){
//check the value in each row of column 2
var m = tbl.rows[j].cells[1].innerHTML;
if(m!=rowHead || j==1){
rowHead=m;
tbl.rows[j].cells[0].innerHTML = link;
// tbl.rows[j].cells[0].style.textAlign="center";
tbl.rows[j].style.background = "#FFFFFF";
}
else
tbl.rows[j].style.display = "none";
}
}
var oldEvt = window.onload;
var preload_image_1=new Image()
var preload_image_2=new Image()
preload_image_1.src=toggleimage[0]
preload_image_2.src=toggleimage[1]
var i_image=0
function testloading() {
isloaded=true
}
function toggle() {
if (isloaded) {
document.togglepicture.src=toggleimage[i_image]
}
i_image++
if (i_image>1) {i_image=0}
}
window.onload = function() { if (oldEvt) oldEvt(); toggleRows(); testloading();}
</SCRIPT>
<TABLE class=expandable width="400px" border="1" cellspacing="0" frame="box" rules="all" >
<THEAD>
<TR>
<TH bgColor="#E6E4D4"> </TH>
<TH bgColor="#E6E4D4" align="left">Manager</TH>
<TH bgColor="#E6E4D4" align="left">Sales Rep</TH>
<TH bgColor="#E6E4D4" align="left">Amount </TH></TR>
</THEAD>
<TBODY>
<TR>
<TD> </TD>
<TD>Sarah Jones</TD>
<TD><i>Georgia District Reps</i></TD>
<TD>500000</TD></TR>
<TR>
<TD> </TD>
<TD>Sarah Jones</TD>
<TD>Rex Smtih</TD>
<TD>350000</TD></TR>
<TR>
<TD> </TD>
<TD>Sarah Jones</TD>
<TD>Alex Anderson</TD>
<TD>150000</TD></TR>
<TR>
<TD> </TD>
<TD>William Hobby</TD>
<TD><i>Texas District Reps</i></TD>
<TD>630000</TD></TR>
<TR>
<TD> </TD>
<TD>William Hobby</TD>
<TD>Bill Smith</TD>
<TD>410000</TD></TR>
<TR>
<TD> </TD>
<TD>William Hobby</TD>
<TD>Simon Wilkes</TD>
<TD>220000</TD></TR>
</TBODY></font></TABLE>
<br>
<br>
<img name="togglepicture" src="http://www.iconlooker.com/user-content/uploads/wall/thumb/misc._icons_closed_folder.png" border="0">
</body>
</html>

working demo
<html>
<head>
<style type="text/css">
table { empty-cells: show; }
cell {font-family:'Calibri';font-size:11.0pt;color: #000000;}
TD{font-family: Calibri; font-size: 10.5pt;}
TH{font-family: Calibri; font-size: 10.5pt; }
</style>
</head>
<body>
<SCRIPT type=text/javascript>
var tbl;
var toggleimage=new Array("http://www.iconlooker.com/user-content/uploads/wall/thumb/misc._icons_open_folder.png","http://www.iconlooker.com/user-content/uploads/wall/thumb/misc._icons_closed_folder.png")
var closedImgHTML = "<img name=\"togglepicture\" src=\"http://www.iconlooker.com/user-content/uploads/wall/thumb/misc._icons_closed_folder.png\" border=\"0\" height=\"20\">";
var openImgHTML = "<img name=\"togglepicture\" src=\"http://www.iconlooker.com/user-content/uploads/wall/thumb/misc._icons_open_folder.png\" border=\"0\" height=\"20\">";
function trim(str){
return str.replace(/^\s*|\s*$/g,"");
}
function getParent(el, pTagName) {
if (el == null) return null;
else if (el.nodeType == 1 && el.tagName.toLowerCase() == pTagName.toLowerCase()) // Gecko bug, supposed to be uppercase
return el;
else
return getParent(el.parentNode, pTagName);
}
function toggleSection(lnk){
var td = lnk.parentNode;
var table = getParent(td,'TABLE');
var len = table.rows.length;
var tr = getParent(td, 'tr');
var rowIndex = tr.rowIndex;
var rowHead=table.rows[rowIndex].cells[1].innerHTML;
lnk.innerHTML =(lnk.innerHTML == openImgHTML)?closedImgHTML:openImgHTML;
vStyle =(tbl.rows[rowIndex+1].style.display=='none')?'':'none';
for(var i = rowIndex+1; i < len;i++){
if (table.rows[i].cells[1].innerHTML==rowHead){
table.rows[i].style.display= vStyle;
table.rows[i].cells[1].style.visibility="hidden";
}
}
}
function toggleRows(){
tables =document.getElementsByTagName("table");
for(i =0; i<tables.length;i++){
if(tables[i].className.indexOf("expandable") != -1)
tbl =tables[i];
}
if(typeof tbl=='undefined'){
alert("Could not find a table of expandable class");
return;
}
//assume the first row is headings and the first column is empty
var len = tbl.rows.length;
var link =''+closedImgHTML+'';
var rowHead = tbl.rows[1].cells[1].innerHTML;
for (j=1; j<len;j++){
//check the value in each row of column 2
var m = tbl.rows[j].cells[1].innerHTML;
if(m!=rowHead || j==1){
rowHead=m;
tbl.rows[j].cells[0].innerHTML = link;
// tbl.rows[j].cells[0].style.textAlign="center";
tbl.rows[j].style.background = "#FFFFFF";
}
else
tbl.rows[j].style.display = "none";
}
}
var oldEvt = window.onload;
var preload_image_1=new Image()
var preload_image_2=new Image()
preload_image_1.src=toggleimage[0]
preload_image_2.src=toggleimage[1]
var i_image=0
function testloading() {
isloaded=true
}
function toggle() {
if (isloaded) {
document.togglepicture.src=toggleimage[i_image]
}
i_image++
if (i_image>1) {i_image=0}
}
window.onload = function() { if (oldEvt) oldEvt(); toggleRows(); testloading();}
</SCRIPT>
<TABLE class=expandable width="400px" border="1" cellspacing="0" frame="box" rules="all" >
<THEAD>
<TR>
<TH bgColor="#E6E4D4"> </TH>
<TH bgColor="#E6E4D4" align="left">Manager</TH>
<TH bgColor="#E6E4D4" align="left">Sales Rep</TH>
<TH bgColor="#E6E4D4" align="left">Amount </TH></TR>
</THEAD>
<TBODY>
<TR>
<TD> </TD>
<TD>Sarah Jones</TD>
<TD><i>Georgia District Reps</i></TD>
<TD>500000</TD></TR>
<TR>
<TD> </TD>
<TD>Sarah Jones</TD>
<TD>Rex Smtih</TD>
<TD>350000</TD></TR>
<TR>
<TD> </TD>
<TD>Sarah Jones</TD>
<TD>Alex Anderson</TD>
<TD>150000</TD></TR>
<TR>
<TD> </TD>
<TD>William Hobby</TD>
<TD><i>Texas District Reps</i></TD>
<TD>630000</TD></TR>
<TR>
<TD> </TD>
<TD>William Hobby</TD>
<TD>Bill Smith</TD>
<TD>410000</TD></TR>
<TR>
<TD> </TD>
<TD>William Hobby</TD>
<TD>Simon Wilkes</TD>
<TD>220000</TD></TR>
</TBODY></font></TABLE>
<br>
<br>
</body>
</html>

Limit all textarea to specified number of characters

On the page there are number of text area. The number is dynamic not fixed. I need to limit length of all text areas on one page. How can I do this in js or jquery?
My try:-
<body>
<div id="contact">
<form action="" method="post">
<fieldset>
<table style="width: 100%;">
<tr class="questionsView" style="width: 100%;margin: 5px;">
<td class="mandatory">
<b>1
*Qywerew we</b>
<hr/>
<table class="profileTable" style="margin-left: 25px;">
<tr>
<td>
<textarea style="border: solid 1px #800000;" rows="5" name="165" cols="100">
</textarea>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr class="questionsView" style="width: 100%;margin: 5px;">
<td class="">
<b>2
a da da da</b>
<hr/>
<table class="profileTable" style="margin-left: 25px;">
<tr>
<td>
<textarea style="border: solid 1px #800000;" rows="5" name="166" cols="100">
</textarea>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
</td>
</tr>
</table>
<input type="submit" value="Submit" onclick="return checkThis()">
</fieldset>
</form>
</div>
<script>
$('textarea').bind('paste keyup blur', function(){
$(this).val(function(i, val){
return val.substr(0, 5);
});
});
</script>
</body>

$('textarea').bind('paste keyup blur', function() {
$(this).val(function(i, val) {
return val.substr(0, 5);
});
});
jsFiddle.
Update
I don't know why but it prints function(i, val) { return val.substr(0, 5); } in text area every time.
Sounds like you are using an older version of jQuery (pre 1.4). The refactored code below will work.
$('textarea').bind('paste keyup blur', function() {
$(this).val(this.value.substr(0, 5));
});
jsFiddle.
The previous code would not work prior to jQuery 1.4 because it expected a string only as the argument to val(). By passing a function, its toString() was implicitly called, returning the string representation of the function.

Horrible and aggressive way
setInterval(function(){
$('textarea').each(function(){
if (this.value.length > 5){
this.value = this.value.substr(0,5);
}
})
}, 1)
http://jsfiddle.net/YMsEF/

var maxLettersCount = 3;
$('textarea').bind('keydown paste', function(event) {
var textarea = $(event.target),
text = textarea.val(),
exceptionList = {
8: true,
37: true,
38: true,
39: true,
40: true,
46: true
};
if (event.type == 'keydown' && text.length >= maxLettersCount && !exceptionList[event.keyCode]) {
return false;
} else if (event.type == 'paste') {
setTimeout(function() {
textarea.val(textarea.val().substring(0, maxLettersCount));
}, 1);
}
})