Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
<table>
<tr>
<th>Numbers</th>
<th>Names</th>
</tr>
<tr>
<th>2</th>
<th>Name 1</th>
</tr>
<tr>
<th>26</th>
<th>Name 2</th>
</tr>
</table>
In my code the rows are imported from a database so they will all be from row 2 in the table.
I want to find the average number of all the numbers in the first column from the second row as the first row just has text in it.
Using Object#values, Array#reduce, and querySelectorAll
const dataElements = document.querySelectorAll("table tr:not(:first-child) > th:first-child");
const res = Object.values(dataElements)
.reduce((a,c)=>a+Number(c.innerText),0)/dataElements.length;
console.log(res);
<table> <tr> <th>Numbers</th> <th>Names</th> </tr><tr> <th>2</th> <th>Name 1</th> </tr><tr> <th>26</th> <th>Name 2</th> </tr></table>
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
I have a code to call the class. Its work in some browsers. but in some other browsers it will not work. i need to give as a immediate class. then only its working in all browsers. Is any other solution for that?
code is:
<table>
<tr>
<td class="abc">
<table>
<tr>
<td>Immediate child<td>
</tr>
</table>
</td>
</tr>
</table>
In Above code class abc is not apply to immediate child text in all browsers. but the following code is working in all browsers.
<table>
<tr>
<td >
<table>
<tr>
<td class="abc">Immediate child<td>
</tr>
</table>
</td>
</tr>
</table>
I have a bulk of files to change that. Please tell me is there any other solutions for that?
All css property will not work. If i put the class abc to the immediate td means its work. my question is why the css is not working when i apply it for outside of table?
You dont close the tags correctly, the last two <td> should be </td>
<table>
<tr>
<td class="abc">
<table>
<tr>
<td>Immediate child</td>
<!--CHANGED FROM <td>Immediate child<td>-->
</tr>
</table>
</td><!--CHANGED FROM <td>-->
</tr>
</table>
I am using JQuery Tablesorter in different tables and it is working fine. Now I am trying to sort different way where one table contain table thead and another table contain table tbody. My table looks like -
<table id="tbl" class="tablesorter">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
</table>
<table id="tbl1">
<tbody>
<tr>
<td>21</td>
<td>abc</td>
<td>82</td>
</tr>
<tr>
<td>12</td>
<td>ttt</td>
<td>90</td>
</tr>
</tbody>
</table>
Can anyone help me how can I achieve this or this is not possible in Tablesorter.
Thanks
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I want to get information of a row to show in a tooltip. For example:
<html>
<table style="width:100%">
<tr>
<td>Jill</td>
<td onmouseover="loadtooltip(parameter)">Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td onmouseover="loadtooltip(parameter)">Jackson</td>
<td>94</td>
</tr>
</table>
<html>
So, when I pass the mouse over the row I need the content of the others columns.
Thx in advance.
You can use parentNode variable as:
<td onmouseover="loadtooltip(this.parentNode)">Smith</td>
You tagged your question with jQuery, so I'm assuming a jQuery solution is acceptable. First, don't inline your event handlers, it's bad form. Instead hook up your event handlers using .on. I added a class to make identifying the td you want to attach the roll over to a little easier. Then in the handler, this will refer to the element that recieved the event and you can use $(this).parent() to get it's parent tr.
$("td.rollable").on("mouseover", function(e) {
var row = $(this).parent();
alert(row[0]);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<table style="width:100%">
<tr>
<td>Jill</td>
<td class="rollable">Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td class="rollable">Jackson</td>
<td>94</td>
</tr>
</table>
<html>
Edit: since your comment suggests you actually need the siblings and not the row itself
$("td.rollable").on("mouseover", function(e) {
var siblings = $(this).siblings();
var text = siblings.map(function(i, item) { return item.innerHTML; });
alert($.makeArray(text).join(", "));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<table style="width:100%">
<tr>
<td>Jill</td>
<td class="rollable">Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td class="rollable">Jackson</td>
<td>94</td>
</tr>
</table>
<html>
$("#table").find("tr").eq(0)
To get the row at index 0. Then you can loop through td elements.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I have a variable X.
X="<table>...</table>"
How to get access to information in X using jQuery?
for example:
X="<table> <thead> <tr> <td>id</td> <td>name</td> <td>mpg</td> <td>cylinders</td> </tr> </thead> <tbody> <tr> <td>1</td> <td>chevrolet chevelle malibu</td> <td>18.0</td> <td>8</td> </tr> <tr> <td>2</td> <td>plymouth satellite</td> <td>18.0</td> <td>8</td> </tr> <tr> <td>3</td> <td>amc rebel sst</td> <td>16.0</td> <td>8</td> </tr> </tbody> </table>"
and I want to have information from 2 line.
You can do:
$(X).find("element").whatever
Example:
var x = "<div><span>hey</span></div>";
console.log($(x).find("span").text()); //logs "hey"
If you want to access text information then you can use
$(x).find("element").text()
if you want to access html content of an element then you can use
$(x).find("element").html()
if you want to find element inside then you can use
$(x).find("element")
With your specific question above, this will get you the text from the second row of the table...
var x = "<table> <thead> <tr> <td>id</td> <td>name</td> <td>mpg</td> <td>cylinders</td> </tr> </thead> <tbody> <tr> <td>1</td> <td>chevrolet chevelle malibu</td> <td>18.0</td> <td>8</td> </tr> <tr> <td>2</td> <td>plymouth satellite</td> <td>18.0</td> <td>8</td> </tr> <tr> <td>3</td> <td>amc rebel sst</td> <td>16.0</td> <td>8</td> </tr> </tbody> </table>";
alert($(x).find("tr").eq(2).text());
Here's a working jsFiddle
If that's not what you want then you really need to tidy up your question and be more specific and helpful. Help us to help you :)
This question is related to this question I asked a little while back. The updated code is posted here. This to note is that i am looking to create a HTML table dynamically that looks similar to this:
<table>
<tbody>
<tr>
<td colspan="3" align="right">Header</td>
</tr>
<tr>
<td colspan="3" align="right">Header</td>
</tr>
<tr>
<td colspan="3" align="right">Header</td>
</tr>
<tr>
<td>Col1</td>
<td>Col3</td>
<td>Col4</td>
</tr>
<tr>
<td>Col1</td>
<td>Col3</td>
<td>Col4</td>
</tr>
</tbody>
</table>
I can get this done in markup but when I do it in js the colspan does not seem to work in IE7. Any hep will be greatly appreciated.
http://www.w3schools.com/jsref/prop_tabledata_colspan.asp
The colSpan javascript property has a capital S.