By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
455,624 Members | 1,712 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 455,624 IT Pros & Developers. It's quick & easy.

how get row number

P: n/a
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
Share this Question
Share on Google+
7 Replies


P: n/a
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

P: n/a
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

P: n/a
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

P: n/a
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

P: n/a
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

P: n/a
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

P: n/a
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 discussion thread is closed

Replies have been disabled for this discussion.