Javascript average of first column from 2 row [closed] - javascript

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

Class to the immediate child is not working [closed]

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>

Multiple table sorting using Tablesorter JQuery

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

How can I pass a row as parameter to javascript? [closed]

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.

how get information from variable in Jquery [closed]

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 :)

Why is the colspan not working properly in this script? js bug or IE?

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.

Categories

Resources