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

Passing cell ID from function to function using onclick

100+
P: 127
Hi all,

I have placed a button in a cell, and I'm trying to use the "onclick" event to pass the ID of the cell (that contains the button) to another function. Could someone tell me what's wrong with the following code:

Expand|Select|Wrap|Line Numbers
  1. var addCell = addRow.insertCell(1);
  2. addCell.id = cnt;
  3. addCell.colSpan = 3;
  4. var element = document.createElement("input");
  5. element.type="button";
  6. element.value="Delete selection";
  7. element.onclick=function(){
  8. delSelection(addCell.id);
  9. }
  10. addCell.appendChild(element);
  11.  
and...

Expand|Select|Wrap|Line Numbers
  1. function delSelection()
  2. {
  3. alert(addCell.id);
  4. //document.getElementById(cellinfo).parentNode.deleteCell(0);
  5. }
  6.  
Thanks in advance for any help!
Apr 14 '09 #1
Share this Question
Share on Google+
8 Replies


dmjpro
100+
P: 2,476
@phub11
"addCell.id" is String so you have to separate them in single quote or double quote.
By the where is "cnt" defined?

You can also the save the cnt in another variable then you can pass it to function.

Expand|Select|Wrap|Line Numbers
  1. element.onclick=function(){
  2. var _id = cnt;
  3. delSelection(_id);
  4. }
  5.  
Apr 14 '09 #2

100+
P: 127
Hi,

Thanks for the reply. Unfortunately it doesn't work.

Also, I can't pass "cnt" as this is a counter in a loop that changes the cell ID as I add more cells. I want to be able to delete "old" cells (containing buttons) that have been added to the table; not just the most recent one.

The button is in a cell with an ID assigned, but I can't get the "onclick" event to pass the cell ID to the new function.

Thanks for any further help!
Apr 14 '09 #3

RamananKalirajan
100+
P: 607
Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3. <script type="text/javascript">
  4. function doThis()
  5. {
  6.    var myTab = document.getElementById('myTable');
  7.    var row=myTab.rows.length; 
  8.    var y=myTab.insertRow(row);
  9.  
  10.    var a=y.insertCell(0);
  11.    var xx= document.createElement('input');
  12.    xx.type="text";
  13.    a.appendChild(xx); 
  14.  
  15.    var c=y.insertCell(1);
  16.    var xx= document.createElement('input');
  17.    xx.type="button";
  18.    xx.value="Remove";
  19.    if(window.ActiveXObject)    
  20.     {
  21.         xx.onclick="removeThis(this)"; 
  22.     }
  23.     else
  24.     {
  25.         xx.onclick = function(){removeThis(this);}; 
  26.     }
  27.  
  28.    c.appendChild(xx); 
  29.     if(window.ActiveXObject)    
  30.     {
  31.      c.innerHTML = c.innerHTML;
  32.     }
  33.   }
  34. function removeThis(ths)
  35. {
  36.    var rIndex = ths.parentNode.parentNode.rowIndex;
  37.    alert("rIndex = "+rIndex);
  38.    document.getElementById('myTable').deleteRow(rIndex);
  39.  
  40. }
  41. </script>
  42.  
  43. </head>
  44. <body>
  45. <br/>
  46. <input type="button" value="Add" onclick="doThis()">
  47. <br/>
  48. <table id="myTable" border="1" cellspacing="5" cellpadding="5">
  49. <tr>
  50. <th>Name</th>
  51. <th></th>
  52. </tr>
  53. </table>  
  54. </body>
  55. </html>
Hi pal, I did this for my typical requirement (WBS). This involves hacks. This is one solution. I dont rely on the counter and the Id. I just get the rowIndex and delete that particular row.

Regards
Ramanan Kalirajan
Apr 14 '09 #4

Dormilich
Expert Mod 5K+
P: 8,639
I have the feeble feeling, that a Closure strikes again…

@RamananKalirajan: just a note
Expand|Select|Wrap|Line Numbers
  1. function removeThis(ths) { 
  2.     ths.doSomething(); 
  3. }
can be easily replaced by
Expand|Select|Wrap|Line Numbers
  1. function removeThis() {
  2.     this.doSomething();
  3. }
if the only passed object is "this". further the function is now available for advanced function calls like: Function.call(), Function.apply(), element.addEventListener() and many more.
Apr 14 '09 #5

100+
P: 127
Thanks Ramanan! Just what I wanted. However, since I'm passing the input boxes to PHP, I'm wondering if I should also set the ID of each cell. Thanks!
Apr 14 '09 #6

dmjpro
100+
P: 2,476
@phub11
is "cnt" a number?
"cnt" can't be the ID...may be you setting 'TD_'+cnt then pass like function_name('TD_'+cnt)
Apr 15 '09 #7

RamananKalirajan
100+
P: 607
@ Dormilich, I will follow the standards. Obviously the way you specified reduce the complexity and increases readability and reusability. Thanks.


Regards
Ramanan Kalirajan
Apr 15 '09 #8

Dormilich
Expert Mod 5K+
P: 8,639
you can improve the readability even more:
Expand|Select|Wrap|Line Numbers
  1. <input type="button" value="Add" onclick="doThis()">
can be replaced by
Expand|Select|Wrap|Line Numbers
  1. <!-- HTML -->
  2. <input type="button" id="add" value="Add">
  3.  
  4. /* JS */
  5. document.getElementById("add").addEventListener("click", doThis, false);
  6. // also possible: getElementsByName(), getElementsByTagName()
  7. // cross-browser => addEvent() => google
Apr 15 '09 #9

Post your reply

Sign in to post your reply or Sign up for a free account.