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.
Related
This question already has answers here:
Get selected element's outer HTML
(30 answers)
Closed 4 years ago.
I'm trying to get the source of a tr element using JQuery.
For this I'm using the selector below :
$('#mygrid > table tr')
On console I can see this selector returns me this :
<tr class="red-background">
<td class="date">10/07/2018</td>
<td class="hora">13:09</td>
</tr>
The return is actually an object, not a string :
typeof $('#grid-historicos > table tr')
"object"
So I can't use the method .html()
So what is the right way to get the HTML source of the element? I need only this part as a string :
<tr class="red-background">
Working fiddle.
You need to select the tr line you want to target using the index [0] in my example, then select the outerHTML and split the result then finally get the first line :
console.log($('#mygrid > table tr')[0].outerHTML.split('\n')[0]);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mygrid">
<table style="width:100%">
<tr class="red-background">
<td class="date">10/07/2018</td>
<td class="hora">13:09</td>
<td>94</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
</div>
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>
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 7 years ago.
Improve this question
Here is my fiddle
Here is my html code
<table id="example" class="display" cellspacing="0" width="100%">
<tbody>
<tr>
<td style="display:none">Tiger Nixon</td>
<td>System Architect</td>
</tr>
<tr>
<td style="display:none">Garrett Winters</td>
<td>Accountant</td>
</tr>
</tbody>
</table>
The output i am getting is like
System Architect
Accountant
But i want to display like
System Architect | Accountant
i.e., Row should be look like column.
Note :
I am hiding the first td, because my search plugin(datatables) will consider the first <td> inside the <tr>
How can i do this ?
It looks like you are trying to force a non table structure on a table element. Even though this is possible using CSS (as others have stated), this is bad practice and should be avoided. I would recommend switching to a different UI plugin that uses divs or list elements.
I'd say a simple css could fix this:
#example tr {
display : inline-block;
}
#example tr {
display: inline-block;
}
please use this...
use tr { display:table-cell}; in CSS, add additional <tr><td> for |
fiddle here
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 8 years ago.
Improve this question
I want to insert a anchor tag inside a column Using JavaScript or JQuery
For example change the first column value 'A' is a link Using JavaScript or JQuery
<table>
<tr>
<th>FirstName</th>
<th>LastName</th>
</tr>
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
I tried with this code but not working
var cell = document.createElement("a");
innercell .setAttribute("href","#");
document.getElementsByTagName("table")[0].rows[1].cells[0].appendChild(innercell );
add this to window.onload event
var td = document.getElementsByTagName("td")[0]; //change the index in actual page
var a = document.createElement("a");
a.setAttribute('href',"link.html"); // replace "link.html" with your own link
a.innerHTML = "link text";
td.appendChild(a);
Using anchors normally is simply, Due to the end result not being described well give this ago.
Where you want to anchor to type
<a id="ANCHOR_NAME">Some Random Thing</a>
Where you want the link to the anchor to be just type
Visit the Anchor
You can link to an anchor on another page using href="page.html#anchor".
I want to insert a anchor tag inside a column Using JavaScript or JQuery
For example change the first column value 'A' is a link Using JavaScript or JQuery
<table>
<tr>
<th>FirstName</th>
<th>LastName</th>
</tr>
<tr>
<td id="first">A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
jQuery Example:
$("#first").text('Google');
EDIT: As you don't want to use an Id,
$("td").first().text('Google');
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 :)