473,326 Members | 2,134 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,326 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 16104
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: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you

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.