jquery - How to check which table cell triggered an action JavaScript -

-

i new web development , hang of doing simple tasks working on project , turns out task want carry out have use javascript having little knowledge of javascript can't figure out how want , have searched online haven't been able finding of use:

how know element clicked within table?

how access specific cell of clicked table row in javascript

...

here project code have written far:

<!doctype html> <html> <head> <meta charset="utf-8"> <title>menu</title> <script>     function toggletable() {     var ltable = document.getelementbyid("menulist");     ltable.style.display = (ltable.style.display == "table") ? "none" : "table"; } </script> </head>  <body> <table width="300" border="1" id="menuitems">   <tbody>     <tr>       <td onclick="toggletable()" id="cell1">&nbsp;on-menu</td>       <td onclick="toggletable()" id="cell2">&nbsp;on-menu</td>       <td onclick="toggletable()" id="cell3">&nbsp;on-menu</td>       <td onclick="toggletable()" id="cell4">&nbsp;on-menu</td>     </tr>     <tr>       <td onclick="toggletable()" id="cell5">&nbsp;on-menu</td>       <td onclick="toggletable()" id="cell6">&nbsp;on-menu</td>       <td onclick="toggletable()" id="cell7">&nbsp;on-menu</td>       <td onclick="toggletable()" id="cell8">&nbsp;on-menu</td>     </tr>     <tr>       <td onclick="toggletable()" id="cell9">&nbsp;on-menu</td>       <td onclick="toggletable()" id="cell10">&nbsp;on-menu</td>       <td onclick="toggletable()" id="cell11">&nbsp;on-menu</td>       <td onclick="toggletable()" id="cell12">&nbsp;on-menu</td>     </tr>   </tbody> </table> <table width="300" border="1" id="menulist">   <tbody>     <tr>       <td id="cellorange">&nbsp;orange</td>     </tr>     <tr>       <td id="cellapple">&nbsp;apple</td>     </tr>     <tr>       <td id="cellbanana">&nbsp;banana</td>     </tr>   </tbody> </table> </body> </html>

here have 2 sets of table, 1 containing empty cells respresented 'on-menu' , containing list of options. please have here: https://jsfiddle.net/pz6tc3ae/

the project far, when clicked on each table cell triggers javascript function toggletable(), toggles section table called menulist containing, orange, apple , banana.

table 1 = menuitems table 2 = menulist

what want know is:

the user can click on cell within table 1, trigger toggletable function , toggle (show/hide) table 2. want know table cell triggered table 2.

having first task done, within table 2, have given ids each of 3 options orange, apple , banana, when user clicks on of these options want text of cell written on cell table 1 triggered table 2 in first place.

i have no clue on how can go doining , having little knowledge of javascript, research haven't proved effective wanted be, therefore appreciate if can me out.

thanks in advance , if question not clear enough please let me know.

you don't need assign event handler each cell of first table , frankly, uses old technique not favored longer. additionally, don't need add &nbsp; before each piece of text in cells, can use regular space since clients strip out spaces when there more 1 of them.

here non-jqquery (straight javascript) way solve problem:

    var firsttable = document.getelementbyid("table1")     var firsttablecells = firsttable.getelementsbytagname("td");     var ltable = document.getelementbyid("menulist");     var ltablecells = null;     var actioncell = null;     for(var = 0; < firsttablecells.length; ++i){         firsttablecells[i].addeventlistener("click", function(evt){              actioncell = evt.srcelement;              ltable.style.display = (ltable.style.display === "table") ? "none" : "table";              if(ltable.style.display === "table"){                   ltablecells = ltable.getelementsbytagname("td");                   for(var x = 0; x < ltablecells.length; ++x){                        ltablecells[x].addeventlistener("click", function(){                             actioncell.innerhtml = this.innerhtml;                        });                   }              }          });     }

jsfiddle: https://jsfiddle.net/pz6tc3ae/17/


Comments

Post a Comment

Popular posts from this blog

Hatching array of circles in AutoCAD using c# -

-
i beginner in autocad plugins .i have created array of circle using following code. now, have hatch circles in array .how that??how hatch circles @ once? moreover, how can return hatch method , use hatch objects.sorry language.thanks in advance. [assembly: commandclass(typeof(beamsection.class1))] namespace beamsection { public class class1 { //class1 obj = new class1(); [commandmethod("beamatsupport")] public void addlightweightpolyline() { // current document , database document acdoc = application.documentmanager.mdiactivedocument; database accurdb = acdoc.database; promptpointresult ppr = acdoc.editor.getpoint("\nselect starting point "); var ucs = acdoc.editor.currentusercoordinatesystem; point3d startingpt = ppr.value.transformby(ucs); list<double> radius = new list<double>(); radius.add(0.5); ...
Read more

ios - UITEXTFIELD InputView Uipicker not working in swift -

-
hello trying pop uipickerview view programmatically when user clicks on textfield. have tried doesn't doing anything. isn't working. nothing happening when click textfield class userprofiletableviewcontroller: uitableviewcontroller,uitextfielddelegate,uipickerviewdelegate,uipickerviewdatasource { var itempicker: uipickerview! = uipickerview() @iboutlet weak var gendertxtfield: uitextfield! var gender = ["male","female"] override func viewdidload() { super.viewdidload() gendertxtfield.delegate = self itempicker!.delegate = self itempicker!.datasource = self itempicker!.backgroundcolor = uicolor.blackcolor() self.gendertxtfield.inputview = itempicker } func numberofcomponentsinpickerview(pickerview: uipickerview) -> int{ return 1 } // returns # of rows in each component.. func pickerview(pickerview: uipickerview, numberofrowsincomponent component:...
Read more