472,805 Members | 2,106 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 472,805 software developers and data experts.

how get row number

Hello this is my problem:

<script language="javascript">
function Show()
{
RowNumber="???"; // I trying this.rowIndex
CellNumber="???"; //
TableID="???"; // :-(

alert(RowNumber);
alert(CellNumber);
alert(TableID)

}
</script>

<div contentEditable="true" onClick="show()">
<table id="table" border=1>
<tr>
<td>row 1 cell 1</td>
<td>row 1 cell 2</td>
</tr>
<tr>
<td>row 2 cell 1</td>
<td>row 2 cell 2</td>
</tr>
<tr>
<td>row 3 cell 1</td>
<td>row 3 cell 2</td>
</tr>
<tr>
<td>row 4 cell 1</td>
<td>row 4 cell 2</td>
</tr>
</table>
</div>

I don't want to add javascript inside the html of the table.
Thanks for help
Jul 23 '05 #1
7 16037
Micha? wrote:
Hello this is my problem:

<script language="javascript">
function Show()
{
RowNumber="???"; // I trying this.rowIndex
'this' will refer to the window element - just do:

alert(this.nodeName)

This reference may help:

<URL:http://www.quirksmode.org/js/contents.html#events>

In brief, the event bubbles up from the td that you click on to
the table, then the div which is why when you click on a cell the
onclick on the div fires.

If you want to discover the cell that you actually clicked on..

<script type="text/javascript">
function Show(e){

// Capture the event - Mozilla or IE
var e = e || window.event;

// Find the element the event came from - Mozilla or IE
var tgt = e.target || e.srcElement;

// If clicked on a TD, then get the row index
if (tgt && tgt.nodeName.toLowerCase() == 'td'){
alert(tgt.parentNode.rowIndex);
} else {

// Otherwise, barf
alert('You clicked on a ' + tgt.nodeName
+ ' not a TD');
}
}
</script>
<!-- Pass 'event' to the function & make div visible -->
<div onClick="Show(event);" style="border: 1px solid red;">

Note that you must pass 'event' to the script. I've added a
border to the div so you can see that when you click in the div,
the onclick still fires but is not acted upon unless a td is
involved.

[...] I don't want to add javascript inside the html of the table.
Thanks for help


None needed.

--
Rob.
Jul 23 '05 #2
Micha? wrote:
Hello this is my problem:

<script language="javascript">
function Show()
{
RowNumber="???"; // I trying this.rowIndex
CellNumber="???"; //
TableID="???"; // :-(

alert(RowNumber);
alert(CellNumber);
alert(TableID)

}
</script>

<div contentEditable="true" onClick="show()">
<table id="table" border=1>
<tr>
<td>row 1 cell 1</td>
<td>row 1 cell 2</td>
</tr>
<tr>
<td>row 2 cell 1</td>
<td>row 2 cell 2</td>
</tr>
<tr>
<td>row 3 cell 1</td>
<td>row 3 cell 2</td>
</tr>
<tr>
<td>row 4 cell 1</td>
<td>row 4 cell 2</td>
</tr>
</table>
</div>

I don't want to add javascript inside the html of the table.
Thanks for help
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">

#table1 { cursor: crosshair; background: moccasin; }
#table2 { cursor: crosshair; background: skyblue; }

</style>
<script type="text/javascript">

document.onclick = function(e)
{
var msg = [];
e = e || window.event || {};
var node = e.srcElement || e.target;
while (node
&& !/td/i.test(node.nodeName))
node = node.parentNode;
msg.push('cell: ' + (node.cellIndex + 1));
while (node
&& !/tr/i.test(node.nodeName))
node = node.parentNode;
msg.unshift('row: ' + (node.rowIndex + 1));
while (node
&& !/table/i.test(node.nodeName))
node = node.parentNode;
msg.push('table id: ' + node.id);
while (node
&& !/div/i.test(node.nodeName))
node = node.parentNode;
msg.push('contentEditable: ' + node.contentEditable);
alert(msg.join('\n'));
}

</script>
</head>
<body>
<div contentEditable="true">
<table id="table1" cellspacing=5 cellpadding=5 border=1>

<tr>
<td>row 1 cell 1</td>
<td>row 1 cell 2</td>
</tr>
<tr>
<td>row 2 cell 1</td>
<td>row 2 cell 2</td>
</tr>
<tr>
<td>row 3 cell 1</td>
<td>row 3 cell 2</td>
</tr>
<tr>
<td>row 4 cell 1</td>
<td>row 4 cell 2</td>
</tr>
</table>
</div>
<br />
<div contentEditable="false">
<table id="table2" cellspacing=5 cellpadding=5 border=1>

<tr>
<td>row 1 cell 1</td>
<td>row 1 cell 2</td>
</tr>
<tr>
<td>row 2 cell 1</td>
<td>row 2 cell 2</td>
</tr>
<tr>
<td>row 3 cell 1</td>
<td>row 3 cell 2</td>
</tr>
<tr>
<td>row 4 cell 1</td>
<td>row 4 cell 2</td>
</tr>
</table>
</div>
</body>
</html>

RobG:

(snip)
var e = e || window.event; //'e' already declared
(snip)
if (tgt && tgt.nodeName.toLowerCase() == 'td'){


(snip)

Why not...

if (tgt && /td/i.test(tgt.nodeName)){

Jul 23 '05 #3
RobB wrote:
Micha? wrote:
Hello this is my problem:

<script language="javascript">
function Show()
{
RowNumber="???"; // I trying this.rowIndex
CellNumber="???"; //
TableID="???"; // :-(

alert(RowNumber);
alert(CellNumber);
alert(TableID)

}
</script>

<div contentEditable="true" onClick="show()">
<table id="table" border=1>
<tr>
<td>row 1 cell 1</td>
<td>row 1 cell 2</td>
</tr>
<tr>
<td>row 2 cell 1</td>
<td>row 2 cell 2</td>
</tr>
<tr>
<td>row 3 cell 1</td>
<td>row 3 cell 2</td>
</tr>
<tr>
<td>row 4 cell 1</td>
<td>row 4 cell 2</td>
</tr>
</table>
</div>

I don't want to add javascript inside the html of the table.
Thanks for help


(snip)

OK, tightened this up a bit...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>untitled</title>
<style type="text/css">

#table1, #table2 {
border: 3px #000 double;
border-collapse: collapse;
}
#table1 {
background: moccasin;
}
#table2 {
background: skyblue;
}
td {
border: 3px #fff dashed;
padding: 4px;
}

</style>
<script type="text/javascript">

document.onclick = function(e)
{

var drillup = function(node, tagname)
{
var re = new RegExp(tagname, 'i');
while (node && !re.test(node.nodeName))
node = node.parentNode;
return node;
}

var msg = [];
e = e || window.event || {};
var node = e.srcElement || e.target;
if (node)
{
if (node = drillup(node, 'td'))
msg.push('cell: ' + (node.cellIndex + 1));
if (node = drillup(node, 'tr'))
msg.unshift('row: ' + (node.rowIndex + 1));
if (node = drillup(node, 'table'))
msg.push('table id: ' + node.id);
if (node = drillup(node, 'div'))
msg.push('contentEditable: ' + node.contentEditable);
if (msg.length > 0)
alert(msg.join('\n'));
}
return false;
}

</script>
</head>
<body>
<div contentEditable="true">
<table id="table1">
<tr>
<td>row 1 cell 1</td>
<td>row 1 cell 2</td>
</tr>
<tr>
<td>row 2 cell 1</td>
<td>row 2 cell 2</td>
</tr>
<tr>
<td>row 3 cell 1</td>
<td>row 3 cell 2</td>
</tr>
<tr>
<td>row 4 cell 1</td>
<td>row 4 cell 2</td>
</tr>
</table>
</div>
<br />
<div contentEditable="false">
<table id="table2">
<tr>
<td>row 1 cell 1</td>
<td>row 1 cell 2</td>
</tr>
<tr>
<td>row 2 cell 1</td>
<td>row 2 cell 2</td>
</tr>
<tr>
<td>row 3 cell 1</td>
<td>row 3 cell 2</td>
</tr>
<tr>
<td>row 4 cell 1</td>
<td>row 4 cell 2</td>
</tr>
</table>
</div>
</body>
</html>

Jul 23 '05 #4
RobB wrote:
[...]

RobG:

(snip)

var e = e || window.event; //'e' already declared

I seem to remember in one browser (can't remmeber now, I'll need
to go back and test 'em) that e needed to be declared this way.
I'll get back when I find it again...
(snip)

if (tgt && tgt.nodeName.toLowerCase() == 'td'){

(snip)

Why not...

if (tgt && /td/i.test(tgt.nodeName)){


No reason, just the way I do it. Your way is more concise, and
likely a few microseconds faster, but slightly harder to read
perhaps.

--
Rob
Jul 23 '05 #5
Micha? napisał(a):
Hello this is my problem:
{
RowNumber="???"; // I trying this.rowIndex
CellNumber="???"; //

I don't want to add javascript inside the html of the table.
Thanks for help


The solution is pretty straightforward- simply attach proper onclick
event to each cell:

<script type="text/javascript">
function rownr(a,t,td,i){
t=document.getElementById(a);
td=t.getElementsByTagName("td");
for (i=0;i<td.length;i++)
td[i].onclick=function(){
alert(this.parentNode.rowIndex+1+","+(this.cellInd ex+1))
}
}
</script>

And fire the function somewhere in the body of the document, possibly
onload event.

rownr('table_id')

--
tomasz cenian tcenian at wa dot home dot pl
:::: :: : : http://cenian.boo.pl : : :: ::::
Jul 23 '05 #6
RobG napisał(a):

If you want to discover the cell that you actually clicked on..

<script type="text/javascript">
function Show(e){


[...]

You might want to add a functionality that makes this function work also
in case of nested elements inside <td>...

<td><p>paragraph <strong>inside</strong> a cell</p><td> for example

function show(e,s){
e=e||window.event;
var tgt=e.target || e.srcElement;
while(tgt.parentNode!=s)
if (tgt.tagName.toLowerCase() == 'td'){
alert(tgt.parentNode.rowIndex); return;
} else tgt=tgt.parentNode;
}
<table id="table" onclick="show(event,this)">
--
tomasz cenian tcenian at wa dot home dot pl
:::: :: : : http://cenian.boo.pl : : :: ::::
Jul 23 '05 #7
Tomasz Cenian wrote:
RobG napisał(a):

If you want to discover the cell that you actually clicked on..

<script type="text/javascript">
function Show(e){

[...]

You might want to add a functionality that makes this function work also
in case of nested elements inside <td>...

<td><p>paragraph <strong>inside</strong> a cell</p><td> for example

[...]

Yes, good point. RobB had a similar idea... but I think a
better idea is to put the onclick on the TD and use 'this', as
you suggest below.
--
Rob
Jul 23 '05 #8

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

3
by: Shay Hurley | last post by:
this is probably a stupid question so apologies in advance. I am trying to format a number to look like a phone number with "-"'s between the numbers etc e.g. 15554256987 should be formatted as...
8
by: EAS | last post by:
Hey, I'm new to python (and programming in general) so I'll prolly be around here a lot... Anyways, I've found out how to make a "guess my number game" where the player guesses a number between...
11
by: don | last post by:
Ok, this is a homework assignment, but can you help me out anyway...... I need a routine for figuring out if a number inputted by the user is a prime number or not...... all I'm asking for is Not...
27
by: Gaijinco | last post by:
Sooner or later everytime I found recreational programming challenges I stumble with how I test if a number is has decimal places differnt than 0? For example if I want to know if a number is a...
13
by: Ron | last post by:
Hi all I'm deciding whether to use the PK also as an account number, invoice number, transaction number, etc that the user will see for the respective files. I understand that sometimes a...
19
by: gk245 | last post by:
Trying to write a program that will figure out if a number is perfect or not. Here is my logic: 1) Read in the number 2) Split it up (number - 1) 3) Put all the split up numbers into an...
4
by: SweetLeftFoot | last post by:
Hello, i have designed some code that works out the first 250 prime numbers and prints them to the screen. However i need to implement 2 functions, one of which returns a 1 if the number is a prime...
4
by: fatimahtaher | last post by:
Hi, I am supposed to create a program that generates a random number and then asks the user to guess the number (1-100). The program tells the user if he guessed too high or too low. If he...
5
by: silversnake | last post by:
I'm trying to write a program that take a input number and prints if is a prime numbers but is not working for instance, it says that 4 is prime while 5 is not. can anyone see what the problem is ....
0
by: erikbower65 | last post by:
Here's a concise step-by-step guide for manually installing IntelliJ IDEA: 1. Download: Visit the official JetBrains website and download the IntelliJ IDEA Community or Ultimate edition based on...
0
by: kcodez | last post by:
As a H5 game development enthusiast, I recently wrote a very interesting little game - Toy Claw ((http://claw.kjeek.com/))。Here I will summarize and share the development experience here, and hope it...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Sept 2023 starting at 18:00 UK time (6PM UTC+1) and finishing at about 19:15 (7.15PM) The start time is equivalent to 19:00 (7PM) in Central...
0
by: Taofi | last post by:
I try to insert a new record but the error message says the number of query names and destination fields are not the same This are my field names ID, Budgeted, Actual, Status and Differences ...
14
DJRhino1175
by: DJRhino1175 | last post by:
When I run this code I get an error, its Run-time error# 424 Object required...This is my first attempt at doing something like this. I test the entire code and it worked until I added this - If...
0
by: Rina0 | last post by:
I am looking for a Python code to find the longest common subsequence of two strings. I found this blog post that describes the length of longest common subsequence problem and provides a solution in...
5
by: DJRhino | last post by:
Private Sub CboDrawingID_BeforeUpdate(Cancel As Integer) If = 310029923 Or 310030138 Or 310030152 Or 310030346 Or 310030348 Or _ 310030356 Or 310030359 Or 310030362 Or...
0
by: lllomh | last post by:
How does React native implement an English player?
0
by: Mushico | last post by:
How to calculate date of retirement from date of birth

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.