Which cell of the table was selected ?

C

cogitoergosum

Hi,
I have a table with four columns.

By default, except for the second column (id="s01") all column values
are protected. When a value is selected from second column, the third
column is enabled. When a value is selected in the third column, the
fourth column is enabled and a separate button for adding a new row
(as in <tr> of code snippet above) is also enabled.

As you would have guessed, I have got the javascript code working when
number of rows is one.
This is obviously because, the javascript for en/disablement does not
get to know which cell was selected.

Thus, if there are four rows and I selected a value from the second
column (id="s02"), how do I detect which cell was selected and thereby
take the action in the adjacent cell ?


<table id="t01" cellpadding="1" cellspacing="0">
<tr>
<td align=center>Delete</td>
<td align=center>Item type</td>
<td align=center>Month Ending</td>
<td align=center>Comments</td>
</tr>
<tr><td><input type="checkbox" id="c01" disabled="true"></td>
<td><select id="s01" value="0">
<option id="00" value="0">Select item type...</option>
<option id="01" value="1">Vendor Item</option>
<option id="02" value="2">Wholesale Item</option>
<option id="03" value="3">Distributor Item</option>
</select></td>
<td><select id="s02" disabled="true" value="0">
<option id="00" value="0">Month ending...</option>
<option id="01" value="1">Jan</option>
<option id="02" value="2">Feb</option>
<option id="03" value="3">Mar</option>
</select></td>
<td><input type="text" id="desc" size="80" accept="plain/text"
disabled="true"></input></td>
</tr>
</table>

Thanks,
Nagesh

PS: I did search this forum. But, most code samples pointed to getting
to a cell from the javascript code rather than the other way around.
 
A

ASM

cogitoergosum a écrit :
<table id="t01" cellpadding="1" cellspacing="0">
<tr>
<td align=center>Delete</td>
<td align=center>Item type</td>
<td align=center>Month Ending</td>
<td align=center>Comments</td>
</tr>
<tr><td><input type="checkbox" id="c01" disabled="true"></td>
<td><select id="s01" value="0">
Click to expand...

value is not allowed in a tag 'select'
<option id="00" value="0">Select item type...</option>
Click to expand...

an id (as a name) can't begin with a number
the 1st character must be a letter
<option id="01" value="1">Vendor Item</option>
<option id="02" value="2">Wholesale Item</option>
<option id="03" value="3">Distributor Item</option>
</select></td>
<td><select id="s02" disabled="true" value="0">
<option id="00" value="0">Month ending...</option>
Click to expand...


only ONE id with same name is allowed !
<option id="01" value="1">Jan</option>
<option id="02" value="2">Feb</option>
<option id="03" value="3">Mar</option>
</select></td>
<td><input type="text" id="desc" size="80" accept="plain/text"
disabled="true"></input></td>
</tr>
</table>

Thanks,
Nagesh

PS: I did search this forum. But, most code samples pointed to getting
to a cell from the javascript code rather than the other way around.
Click to expand...


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>Untitled</title>
<script type="text/javascript">
<!--

function nextFree(what) {
var idx;
// collection of elements in what's row
var rw = setElem(what);
// index in row
switch(what.name) {
case 's1[]': idx = 2; break;
case 's2[]': idx = 3; break;
case 'desc[]': idx = 0; break;
}
if(what.checked) {
rw[1].selectedIndex = rw[2].selectedIndex = 0;
rw[3].value ='';
rw[0].disabled = rw[2].disabled = rw[3].disabled = true;
what.checked = false;
}
else
if(1<idx && idx<4) {
if(what.selectedIndex==0) {
rw[0].disabled = rw[idx].disabled = true;
if(idx==2) {
rw[idx].selectedIndex = 0;
rw[3].disabled = true;
}
rw[3].value = '';
alert('you must choice an item in this list');
}
else rw[idx].disabled=false;
}
else
rw[0].disabled=false;
}

function setElem(where) {
// which table row ?
while(where.tagName.toLowerCase() != 'tr')
{
where = where.parentNode;
}
var I = where.getElementsByTagName('INPUT');
var S = where.getElementsByTagName('SELECT');
// array of form elements in this table's row
var rw = [I[0], S[0], S[1], I[1]];
return rw;
}

onload = function() {
var t = document.getElementById('t01');
t = t.getElementsByTagName('TR');
for(var i=1; i<t.length; i++) {
var I = t.getElementsByTagName('INPUT');
var S = t.getElementsByTagName('SELECT');
I[0].onclick = function() { nextFree(this); };
I[1].onchange = function() { nextFree(this); };
S[0].onchange = function() { nextFree(this); };
S[1].onchange = function() { nextFree(this); };
}
}
//-->
</script>
</head>
<body>
<form action="javascript:void();">
<table id="t01" cellpadding="1" cellspacing="0">
<tr>
<td align=center>Delete</td>
<td align=center>Item type</td>
<td align=center>Month Ending</td>
<td align=center>Comments</td>
</tr>
<tr><td><input type="checkbox" id="c_01" name="c1[]"
disabled="true"></td>
<td><select id="s1_01" name="s1[]">
<option value="0">Select item type...</option>
<option value="1">Vendor Item</option>
<option value="2">Wholesale Item</option>
<option value="3">Distributor Item</option>
</select></td>
<td><select id="s2_01" name="s2[]" disabled="true">
<option value="0">Month ending...</option>
<option value="1">Jan</option>
<option value="2">Feb</option>
<option value="3">Mar</option>
</select></td>
<td><input type="text" id="desc_01" name="desc[]" size="80"
accept="plain/text" disabled="true"/></td>
</tr>
<tr><td><input type="checkbox" id="c_02" name="c1[]"
disabled="true"></td>
<td><select id="s1_02" name="s1[]">
<option value="0">Select item type...</option>
<option value="1">Vendor Item</option>
<option value="2">Wholesale Item</option>
<option value="3">Distributor Item</option>
</select></td>
<td><select id="s2_02" name="s2[]" disabled="true">
<option value="0">Month ending...</option>
<option value="1">Jan</option>
<option value="2">Feb</option>
<option value="3">Mar</option>
</select></td>
<td><input type="text" id="desc_02" name="desc[]" size="80"
accept="plain/text" disabled="true"/></td>
</tr>
<tr><td><input type="checkbox" id="c_03" name="c1[]"
disabled="true"></td>
<td><select id="s1_03" name="s1[]">
<option value="0">Select item type...</option>
<option value="1">Vendor Item</option>
<option value="2">Wholesale Item</option>
<option value="3">Distributor Item</option>
</select></td>
<td><select id="s2_03" name="s2[]" disabled="true">
<option value="0">Month ending...</option>
<option value="1">Jan</option>
<option value="2">Feb</option>
<option value="3">Mar</option>
</select></td>
<td><input type="text" id="desc_03" name="desc[]" size="80"
accept="plain/text" disabled="true"/></td>
</tr>
</table>
</form>
</body>
</html>
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

How to create a JSON array with values from DOM(HTML TABLE) when I click a button using JQuery/Javascript? 0
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button> 1
How to create a JSON array with values from DOM(HTML TABLE) when I click a button using JQuery/Javascript? 0
How to add dropdown selected data to table using jquery 2
Sort by number of characters 1
Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0
How can I make the ddChild dropdown conditionally required and its selected value should not be the initial value(which is value="") 2
I am using 2 loops, 1 for input and 1 for td. Can we achieve the same functionality with 1 loop in Jquery? 4

Members online

Total: 46 (members: 1, guests: 45)
Robots: 379

Forum statistics

Threads
473,995
Messages
2,570,236
Members
46,822
Latest member
israfaceZa

Latest Threads

Top