473,406 Members | 2,710 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,406 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 16113
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: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
0
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
0
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...

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.