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>
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 table where I need the last td in the row to look like a nested row.
I can't make it a new row, but I want everything in that <td> </td> be nested under that row.
Please see this fiddle . You can click the icon to see a new row appear. But I can't use a new row, it needs to be in the same DOM row. I want the last column to move down to look like a new row instead. It doesn't have to align, just get to a new row.
Is there css that will make that happen?
Can I use jquery/js to change the css to make that happen?
You can use colspan for the tr and give it the number of columns you have...then you will only need one td
You could hide some cells and then use colspan to span the remaining columns.
<table>
<tr>
<td>1.1</td>
<td>1.2</td>
<td>1.3</td>
<td>1.4</td>
</tr>
<tr>
<td>2.1</td>
<td>2.2</td>
<td>2.3</td>
<td>2.4</td>
</tr>
<tr>
<td class="hide">3.1</td>
<td class="hide">3.2</td>
<td class="hide">3.3</td>
<td colspan=4>3.4</td>
</tr>
</table>
table {width:100%;color:white}
td {background:blue}
tr:last-of-type td:last-of-type {background:green;}
.hide {display: none;}
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 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 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 :)