demuro1 Posted October 6, 2012 Share Posted October 6, 2012 (edited) I'm taking a class in javascript and I have a question I need a little help with. I think I have a basic understanding of what's needs to happen but I'm not sure about the syntax. Here's the question: Suppose I have a JavaScript variable named myTable. Suppose myTable stores an HTML table. Write a snippet of JavaScript code to retrieve the number of columns in the table. Store the number of columns in a variable named numberOfColumns. HINT: Find the number of cells that are in the first row I think what I need is something like this: var numberOfColumns = document.getElementByTag("table") or something with a row.length but I'm a little lost. I'd appreciate any help the forum can provide. Thanks Edited October 6, 2012 by demuro1 Link to comment Share on other sites More sharing options...
Ingolme Posted October 6, 2012 Share Posted October 6, 2012 The function is getElementsByTagName() and, as the name implies, it returns multiple elements in the form of a node list. To access one of the elements you use the node list like an array, with square brackets. var x = document.getElementsByTagName("table");var firstTable = x[0]; The HTML table object has multiple properties and methods which you can see here: http://www.w3schools.com/jsref/dom_obj_table.aspYou're looking for the rows property: http://www.w3schools.com/jsref/coll_table_rows.asp Link to comment Share on other sites More sharing options...
demuro1 Posted October 6, 2012 Author Share Posted October 6, 2012 Ingolme, I appreciate the help so far. Here is what I am working on. I'm still trying to return the number of columns I tried your suggestion but it returns [object HTMLTableElement]. In my code I commented out what I was trying. My solution did not work unfortunately. I appreciate all your help. <html><head><script> function displayResult() { /* var myRows = document.getElementByTagName("tr"); var myCol = myRows[0]; alert(myCol.length);*/ var x = document.getElementsByTagName("table"); var firstTable = x[0]; alert(firstTable); } </script></head> <body><table id="myTable" border="1"> <tr> <td>cell 1,1</td> <td>cell 1,2</td> <td>cell 1,3</td> <td>cell 1,4</td> </tr> <tr> <td>cell 2,1</td> <td>cell 2,2</td> <td>cell 2,3</td> <td>cell 2,4</td> </tr> <tr> <td>cell 3,1</td> <td>cell 3,2</td> <td>cell 3,3</td> <td>cell 3,4</td> </tr></table><br /><input type="button" value="return columns" onclick=displayResult()></body></html> Link to comment Share on other sites More sharing options...
Ingolme Posted October 6, 2012 Share Posted October 6, 2012 You seem to have missed the second half of my post. And the code I provided in the first half was just to copy and paste, it needs to be particularized for your case. I can't know if the table you're trying to access is the first one in the page or not. The first thing you need to do is access the table, that's what the code I showed you does, but once you have a reference to the table you then have to count the rows that it contains. Link to comment Share on other sites More sharing options...
demuro1 Posted October 7, 2012 Author Share Posted October 7, 2012 It's the only table on the web page. it's not the rows I need, that part I can do and your code was very helpful. I need the number of columns per row Link to comment Share on other sites More sharing options...
Ingolme Posted October 7, 2012 Share Posted October 7, 2012 It's all in the reference. Each row has a list of table cells.Here's the reference for a row: http://www.w3schools.com/jsref/dom_obj_tablerow.aspAnd there's a link on that page to the reference for the cells property: http://www.w3schools.com/jsref/coll_tr_cells.asp Link to comment Share on other sites More sharing options...
demuro1 Posted October 8, 2012 Author Share Posted October 8, 2012 Wow! Thank you so much for your help. I got it to work. I was wondering if there was a way to get this to work with a getElementByTagName. I must be structuring the javascript wrong based on how getElementById and getElementByTagName work. can you offer any suggestions. You've been such a great help. Thanks again. <html><head><script> function displayResult() { var myTable = document.getElementByTagName("myTable"); var myCol = myTable.rows[0].cells.length; alert(myCol); }</script></head><body><table id="myTable" border="1"> <tr> <td>cell 1,1</td> <td>cell 1,2</td> <td>cell 1,3</td> <td>cell 1,4</td> </tr> <tr> <td>cell 2,1</td> <td>cell 2,2</td> <td>cell 2,3</td> <td>cell 2,4</td> </tr> <tr> <td>cell 3,1</td> <td>cell 3,2</td> <td>cell 3,3</td> <td>cell 3,4</td> </tr></table><br><input type="button" value="return columns" onclick=displayResult()></body></html> Link to comment Share on other sites More sharing options...
thescientist Posted October 8, 2012 Share Posted October 8, 2012 (edited) do you look these things up before you try them? Or look in your error console? There is no such method as getElementByTagName. You can't just make up methods based on your assumptions that they should exist. Also, "myTable" is not a tag. It's the id of the table. <table> is a tag, <p> is a tag. The reason that it's just getElementById is because there should only be one element on the page with a given Id, so if you have plural elements with the same Id, then it would be contradictory to the spec and what you would be doing would be "wrong". Change your code to use getElementById if you want to target one particular element and you know its Id (like your last post). Edited October 8, 2012 by thescientist Link to comment Share on other sites More sharing options...
demuro1 Posted October 8, 2012 Author Share Posted October 8, 2012 do you look these things up before you try them? Or look in your error console? yes I did. did you read this whole thread? Ingolme referenced getElementsByTagName earlier There is no such method as getElementByTagName. You can't just make up methods based on your assumptions that they should exist. ah, you're right. it's getElementsByTagName.my mistake, I forgot the s. here's a link:http://www.w3schools...tsbytagname.asp Also, "myTable" is not a tag. It's the id of the table. <table> is a tag, <p> is a tag. I understand that. If you look at the posted code for table I set the id = 'myTable" and then I call that in getElementById. I can understand the confusion as I posted the wrong code above. I am trying to store a table in the variable myTable and then I am trying to extract certain information out of it. The reason that it's just getElementById is because there should only be one element on the page with a given Id, so if you have plural elements with the same Id, then it would be contradictory to the spec and what you would be doing would be "wrong". Change your code to use getElementById if you want to target one particular element and you know its Id (like your last post). As I said I can make my code work with a getElementById. I still have the same question about making the page work with a getElementsByTagName. I see I posted the incorrect code above. I will add the code that does work here but if anyone has any suggestions on how to make this work with a getElementsByTagName I'd really appreciate it. I appreciate the feedback and all the help. Thanks for taking time to reply! Also thescientist…you seem a little hostile. It's probably just the way I'm reading everything, like when a text message doesn't carry the right tonal inflection and so it doesn't carry the total meaning of what you're trying to say so I'm sure it's just me Thanks again for all the help! <html><head> <script> function displayResult() { var myTable = document.getElementById("myTable"); var myCol = myTable.rows[0].cells.length; alert(myCol); }</script></head><body><table id="myTable" border="1"> <tr> <td>cell 1,1</td> <td>cell 1,2</td> <td>cell 1,3</td> <td>cell 1,4</td> </tr> <tr> <td>cell 2,1</td> <td>cell 2,2</td> <td>cell 2,3</td> <td>cell 2,4</td> </tr> <tr> <td>cell 3,1</td> <td>cell 3,2</td> <td>cell 3,3</td> <td>cell 3,4</td> </tr></table><br><input type="button" value="return columns" onclick=displayResult()></body></html> Link to comment Share on other sites More sharing options...
thescientist Posted October 8, 2012 Share Posted October 8, 2012 All my comments were regarding your code in post #7. You used getElementByTagName and referenced an ID. It was hard to tell if this was something you were trying to get working or if you were wondering if it would work. Seeing as you had already been told about getElementsByTagName, it was hard to wonder why you would be using getElementByTagName, wondering if the code would work, when the error console would have given you an error. Plus the mixup of tag name and ID was perplexing. Just going by what's presented to me. Link to comment Share on other sites More sharing options...
Ingolme Posted October 9, 2012 Share Posted October 9, 2012 The question is why you think you need getElementsByTagName(). The getElementsByTagName() method is meant to return a list of nodes and is not the best option to get a single node. Link to comment Share on other sites More sharing options...
demuro1 Posted October 9, 2012 Author Share Posted October 9, 2012 The question is why you think you need getElementsByTagName(). The getElementsByTagName() method is meant to return a list of nodes and is not the best option to get a single node. An excellent question! Right now in my class we are working with the method getElementsByTagName() and the question I posted at the top of the page is in the homework under the getElementsByTagName() section. That and I think it would be awesome to make work, I have found the course I'm taking to be very easy but also very enjoyable and this is literally the first thing I have not been able to get to work on my own in the 5 weeks the class has been going on. So I'm kind of on a mission to make this thing work if it's at all possible. Link to comment Share on other sites More sharing options...
Ingolme Posted October 9, 2012 Share Posted October 9, 2012 Oh, well. I mentioned how to access your table using getElementsByTagName in one of my earlier posts.document.getElementsByTagName("table") returns a list of every single table element in your document. The first one being 0, the second 1 and so on. Figure out which index your table has and then access it from the list of table nodes that are returned. var tables = document.getElementsByTagName("table");var myTable = tables[0]; // 0 is the first table of the list Link to comment Share on other sites More sharing options...
demuro1 Posted October 9, 2012 Author Share Posted October 9, 2012 I want to thank you guys so much for your help. I have gotten this question solved 3 ways which is awesome. One uses only the getElementsByTagName method one uses both getElementsByTagName and getElementById methods and the last, and by far the most elegant uses only getElementById. here's what I ended up with. Thanks again so much for all your help! var myTable = document.getElementById("myTable");var myCol = myTable.rows[0].cells.length; var rowIndex = 0; // rowindex, in this case the first row of your tablevar table = document.getElementById('myTable'); // table to perform search onvar row = table.getElementsByTagName('tr')[rowIndex];var cells = row.getElementsByTagName('td');var cellCount = cells.length; var rowIndex = 0; // rowindex, in this case the first row of your tablevar tables[0] = document.getElementsByTagName("table");var myTable = tables[0]; // 0 is the first table of the listvar row = myTable.getElementsByTagName('tr')[rowIndex];var cells = row.getElementsByTagName('td');var cellCount = cells.length; Link to comment Share on other sites More sharing options...
Ingolme Posted October 9, 2012 Share Posted October 9, 2012 Or var cellCount = document.getElementsByTagName("table")[0].getElementsByTagName("tr")[0].getElementsByTagName("td").length; Link to comment Share on other sites More sharing options...
demuro1 Posted October 12, 2012 Author Share Posted October 12, 2012 oh man that works way better!!! Thanks again 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