anson920520 Posted January 7, 2013 Share Posted January 7, 2013 I want to change something in a table when i click on it,so i create a onclick function,but i notice if i have a fucntion like this: <html><head><script type="text/javascript">function handleRightClick(){document.getElementById("test").innerHTML="123123";}</script</head><body><table id="test" oncontextmenu="handleRightClick(this); return false;"><tr><td>A</td></tr><tr><td>B</td></tr><tr><td>C</td></tr></body></html> when i click on it, it will change everything,how can i change all my elements sperate ?like when i click on A, only a will change. I want to know how to make it in one function,not create a new functionbecause if i have 50 elements then i may need to have 50 same functions to do it lol Many thanks Link to comment Share on other sites More sharing options...
Labtec Posted January 7, 2013 Share Posted January 7, 2013 (edited) Take a look at this code. It's jQuery but it works pretty well. <!DOCTYPE html><html lang=en><head><meta charset="utf-8"><!-- saved from url=(0014)about:internet --><title>localhost - Viewing a Kennel</title><link rel="stylesheet" href="/css/main.css" media="screen"><script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script><script>$(function(){ $("td").on("contextmenu",function(){ $(this).text("123123"); });}); </script></head><body> <table id="test" > <tr> <td>A</td> </tr> <tr> <td>B</td> </tr> <tr> <td>C</td> </tr></table> </body></html> Hope this helps. Regards, Labtec. Edited January 7, 2013 by Labtec Link to comment Share on other sites More sharing options...
Ingolme Posted January 7, 2013 Share Posted January 7, 2013 The innerHTML refers to every single thing that's between the <table> and </table> tags. There are other ways to access elements, besides getElementById(). I use getElementsByTagName() a lot. For example, to get all the table cells inside the table: var cells = document.getElementById("test").getElementsByTagName("td");for(var i = 0; i < cells.length; i++) { cells[i].innerHTML = "123";} Link to comment Share on other sites More sharing options...
anson920520 Posted January 7, 2013 Author Share Posted January 7, 2013 Thanks for help,but let's said this, i have my table which wrote in javascript document.write('<table>');//Creates Tabledocument.write('<table>');//for loop that creates the row, increments from 0 to 9 each time it reiteratesfor (var row=0; row<9; row++) { document.write('<tr>'); //a nested for loop that reiterates 9 times creating the <td>'s and then exits to the parent for loop. for (var col=0; col<9; col++) { document.write('<td id="r', row, 'c', col, '"oncontextmenu="handleRightClick(this); return false;">'); document.write('</td>'); } document.write('</tr>');}document.write('</table>'); and now i want to put an image when user right click on itso i try this code to test it: function handleRightClick(){ document.getElementById('r0c0').innerHTML = '<img src="minesweeper_tiles.png" width="28px" height="28px" alt="Automine" />';} it works , but i want to let the user click on any of themand the cell he select will have an image appeari had plan to loop throught the whole tablebut i realize if i do so, when the user click onceeverything cell will appear an image, not only the selected cell. Many thanks Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now