javascript+get next element value in table

webster5u · #1 September 2nd, 2008, 10:05 AM

if i have a table like below, is it any javascript methods use a object as parameter to retrieve the next object b? like document.getNextElement?

[HTML]<form method="post" action="send.jsp">
<table>
<tr>
<td><input type="text" name="a" /></td>
<td><input type="text" name="b" /></</td>
<td><input type="text" name="c" /></</td>
<td><input type="text" name="d" /></</td>
</tr>

<tr>
<td><input type="text" name="e" /></</td>
<td><input type="text" name="f" /></</td>
<td><input type="text" name="g" /></</td>
<td><input type="text" name="h" /></</td>
</tr>
</table>
</form>[/HTML]

Dormilich · #2 September 2nd, 2008, 10:36 AM

in this case I would use getElementsByTagName("input") and loop through the result array. Another way is to use the nextSibling/previousSibling/parentNode/childNodes properties of the node object.

RamananKalirajan · #3 September 2nd, 2008, 01:06 PM

I hope this will help u out

[HTML]<html>
<head>
<script type="text/javascript">
function doThis(ths)
{
var x=(ths.id).toString();
var i=x.indexOf('r');
var num = parseInt(x.substring((i+1),x.length));
var table = document.getElementById("myTable");
var row = table.rows[num-1];
var first=row.cells[0].innerHTML;
var second = row.cells[1].innerHTML;
document.getElementById('myText1').value=first;
document.getElementById('myText2').value=second;
}
</script>
</head>
<body>
<p>Click on any Element in the Table</p>
<br/>
<table id="myTable" border="1" cellpadding="5" cellspacing="5">
<tr id="tr1" onclick="doThis(this)">
<td>Hai1</td><td>Hello1</td>
</tr>
<tr id="tr2" onclick="doThis(this)">
<td>Hai2</td><td>Hello2</td>
</tr>
<tr id="tr3" onclick="doThis(this)">
<td>Hai3</td><td>Hello3</td>
</tr>
<tr id="tr4" onclick="doThis(this)">
<td>Hai4</td><td>Hello4</td>
</tr>
<tr id="tr5" onclick="doThis(this)">
<td>Hai5</td><td>Hello5</td>
</tr>
</table> <br/>
<input type="text" id="myText1">     <input type="text" id="myText2">
</body>
</html>[/HTML]
This will be helpful if the data is within td

Regards
Ramanan Kalirajan

RamananKalirajan · #4 September 2nd, 2008, 01:14 PM

Hope this satisfies ur requirement

[HTML]<html>
<head>
<script type="text/javascript">
function doThis(ths)
{
var x=(ths.id).toString();
var i=x.indexOf('r');
var num = parseInt(x.substring((i+1),x.length));
var table = document.getElementById("myTable");
var row = table.rows[num-1];
var first=row.cells[0].childNodes[0].value;
var second = row.cells[1].childNodes[0].value;
document.getElementById('myText1').value=first;
document.getElementById('myText2').value=second;
}
</script>
</head>
<body>
<p>Click on any Element in the Table</p>
<br/>
<table id="myTable" border="1" cellpadding="5" cellspacing="5">
<tr id="tr1" onclick="doThis(this)">
<td><input type="text" value="Hai1"></td><td><input type="text" value="Hello1"></td>
</tr>
<tr id="tr2" onclick="doThis(this)">
<td><input type="text" value="Hai2"></td><td><input type="text" value="Hello2"></td>
</tr>
<tr id="tr3" onclick="doThis(this)">
<td><input type="text" value="Hai3"></td><td><input type="text" value="Hello3"></td>
</tr>
<tr id="tr4" onclick="doThis(this)">
<td><input type="text" value="Hai4"></td><td><input type="text" value="Hello4"></td>
</tr>
<tr id="tr5" onclick="doThis(this)">
<td><input type="text" value="Hai5"></td><td><input type="text" value="Hello5"></td>
</tr>
</table> <br/>
<input type="text" id="myText1">     <input type="text" id="myText2">
</body>
</html>[/HTML]

Regards
Ramanan Kalirajan

webster5u · #5 September 3rd, 2008, 11:52 AM

thank you, this code very useful for me.

RamananKalirajan · #6 September 4th, 2008, 06:10 AM

Quote:

Originally Posted by webster5u

thank you, this code very useful for me.

In future any probs, post it to the forum, i will try to help u out

Regards
Ramanan Kalirajan

Popular Articles

What is Bytes?