Trying to copy content of table into a div, and can't make it work...
Here is sample code of the table and div
<table><tr>
<td class="movr">See this content</td>
</tr></table>
<div class="sample"></div>
and here is jquery code
$(document).ready(function(){
var move = $(".movr").html;
$(".sample").html(move);
});
Can't find the mistake..
html is method and not property. Use .html() instead of .html:
var move = $(".movr").html();
$(".movr") returns an array NOT an object, mate.
Related
I have a HTML structure like this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<table id ="x">
<tr>
<td class='col1'>
Hello <span class='name'></span> How are u ?
<td>
</tr>
</table>
And here is my jQuery code:
var variable = $('table#x').find(".col1").html().find("span.name").append(' Jack..!').replace('u', 'you');
alert(variable);
Now, I want this output:
<td class='col1'>Hello <span class='name'>Jack..!</span> How are you ?<td>
How can I do that?
You already have a class you can target, 'name'. You can simply add the text to this:
$('.name').text('Jack..!')
https://jsfiddle.net/2j7rxwyj/
Based on my comment, you could use the following:
Updated Example
$('table#x .col1 span.name').append(' Jack..!').parent().text(function () {
return $(this).text().replace('u', 'you');
});
There were a couple issues in your code. For one, you can't chain .append() after the .html() method. In addition, the .replace() method wasn't changing the text. To fix this, you could pass an anonymous function to the .text() method and return the replaced text.
I am trying to add some data in the following table structure :
<table>
<tr id = "line_one">
<!-- datas here -->
</tr>
<tr id = "line_two">
<!-- or data here -->
</tr>
</table>
I already tried in JQuery the following call to .appendTo() :
<script type = "text/javascript">
$(document).ready(function() {
$("#line_one").appendTo("<td>test</td>");
}
</script>
Does anyone has a clue of what happened wrong on this short code ?
Use .append() in your case and not .appendTo() .
.appendTo() will append tr to td
$("#line_one").append("<td>test</td>");
Also
$(document).ready(function(){
………
});
Closing paranthesis missing.
You want to use append, not appendTo.
As is it, you're appending #line_one to a newly created DOM object <td>test</td> and just keeping it in memory.
Try to use append instead of appendTo
<script type = "text/javascript">
$(document).ready(function() {
$("#line_one").html("<td>test</td>");
}
</script>
How can i remove entire <tr> from a table using javascript without using getElementByID because i do not have any IDs of table tr or tds
Assume your table has id="mytable":
This is how you get all the trs:
1. var trs = document.getElementById("mytable").rows; or
2. var trs = document.getElementById("mytable").getElementsByTagName("tr");
Now do this:
while(trs.length>0) trs[0].parentNode.removeChild(trs[0]);
If you don't have id for your table and you have only one table on the page, do this:
var trs = document.getElementsByTagName("table")[0].rows;
It would be hard to remove a specific tr if you don't give it an id. If you want to remove certain kind of trs, give them a class attribute and remove only those trs with this class attribute.
Once you have identified the <tr> you wish to remove (you haven't provided enough context to your question to suggest (without making lots of assumptions) how you might do that):
tr_element.parentNode.removeChild(tr_element)
You could try something like this with jQuery:
$(function(){
$('tr, td').remove();
});
Or if — for whatever reason — you'd like to remove all contents of a table:
$('table').empty();
try something like this
<html>
<head>
<style>
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<table>
<tr>
<td>test</td><td>test</td><td>test</td>
</tr>
<tr>
<td>test</td><td>test</td><td>test</td>
</tr>
</table>
<button>Empty</button>
<script>
$("button").click(function () {
$("table").empty();
});
</script>
</body>
</html>
I want to change the "Yes! Pick me" into "Picked" with Jquery in the following HTML structure, I used $('#myDiv>table>tr>td>table>tr').eq(1).text("Picked"); But it was not working. Could someone shed some light on this please? Thanks!
FYI, the first td of the the first table itself contains another table...
<div id="myDiv">
<table>
<tr>
<td>
<table>
<tr>
<td>Yes! Pick me!</td>
<td>Not me..</td>
</tr>
<tr>
<td>Not me..</td>
</tr>
</table>
</td>
<td>Not me..</td>
</tr>
<tr>
<td>Not me..</td>
</tr>
</table>
</div>
The section $('#myDiv>table>tr>td>table>tr>td').eq(1).text("Picked"); does the trick, I forgot the last td part. Thanks to Rocket and everyone's help.
Try this:
$("#myDiv table table td:first").text("Picked")
$('#myDiv').find('table table td').eq(0).text(...);
Start your selection at the #myDiv element ($('#myDiv')), then find all the TD element that are inside a table that is inside another table (.find('table table td')), then only alter the first one (.eq(0)).
Documentation:
.find(): http://api.jquery.com/find
.eq(): http://api.jquery.com/eq
The main problem is that you want .eq(0) not .eq(1) as .eq() is 0-based, and you are not selecting the td, only the tr.
Other than that using > direct descendant selectors makes your selection not very robust at all.
Try $('#myDiv table table td').eq(0).text('Picked');
You can try:
$("td:contains('Yes! Pick me!')").text("Picked");
You can use the :contains(text) selector
$('#myDiv td table td:contains(Yes! Pick me!)').text('Picked');
Be careful with nested tables however because if you were to use just
$('#myDiv td:contains(Yes! Pick me!)').text('Picked');
You would get both the cell your after plus the cell it is nested within.
Your child selector query won't work because HTML5 requires the parser to insert <tbody> elements inside your <table> elements, since you've forgotten to put them in yourself. Perhaps you should consider validating your HTML?
I have the following code:
<%-- other tags --%>
<table>
<tr width="100%">
<td width="130" />
<td id="BottomCell" width="100%" />
</tr>
<tr>
<td/>
<td/>
</tr>
</table>
<%-- other tags --%>
There may be more than one table on the page. I want the td before "BottomCell" to be removed (or hidden) when the page is loaded. How can I do this with javascript or css?
Thanks.
BTW, I'm developing a Sharepoint WebPart that will be put onto a page. The is on that page, which i don't have control of directly. But the WebPart should remove this as long as it shows up on the page.
Wow, going back to basics after using a framework is hard work.
var element = document.getElementById('BottomCell').previousSibling;
var parent = element.parentNode;
parent.removeChild(element);
In jQuery:
$('#BottomCell').prev().detach();
Well, assuming you have only one table, then you could do something like this (in javascript):
var firstCell = document.getElementsByTagName('tr')[0].getElementsByTagName('td')[0];
firstCell.parentNode.removeChild(firstCell);
It would get the first cell of the first row in the entire DOM tree, and remove that cell.
tr > td should do the trick.
Child and Sibling selectors
http://css-tricks.com/child-and-sibling-selectors/
#diodeus if there are only 2 data cells that would be acceptable, however if you wish to remove the first data cell regardless of however many cells are located in that row, you can do something like
var el = document.getElementById('BottomCell');
el.removeChild(el.parentNode.firstChild);
In jQuery I would find the parent and use the :first selector probably