How to add datas in a <tr> table in JQuery - javascript

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>

Related

How to append something between a javascript string?

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.

Jquery:Copyting content from table to div

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.

This will only delete the first row in my table. I would like it to delete whichever row I click on using jQuery & html

I would like to know how to delete whichever table row I click the delete link in. Right now it is only deleting one row.
<script type="text/javascript">
$(function() {
$("#deleteEvent").click(function(e) {
$("#drow").remove();
return false;
});
</script>
The html is here
<div id="students">
<table>
<caption>Students</caption>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Student ID</th>
<th>Email</th>
<th>Action</th>
</tr>
<tr id="drow"><td>John</td><td>Doe</td><td>1234</td><td>john.doe#gmail.com</td><td>Delete</td></tr>
<tr id="drow"><td>Amy</td><td>Adams</td><td>234234</td><td>amy.adams#hotmail.com</td> <td>Delete</td></tr>
<tr id="drow"><td>Megan</td><td>Huffman</td><td>12255</td><td>amy.adams#hotmail.com</td><td>Delete</td></tr>
</table>
Add Record
</div>
You're re-using id values in your HTML, which is invalid. Given that, the behavior of anything selecting those ids is undefined. This, for example:
$("#drow").remove();
It might delete the first #drow, it might delete all of them, it might delete none of them, it might throw an error, etc. Since the markup is invalid, the behavior is undefined.
So the first thing you'll want to do is not re-use id values in the HTML. The HTML you show could use class values instead:
<tr class="drow">
Or, you might not need the id or class at all...
If the delete button is inside the row then you can reference the row relative to the button that was clicked with this:
$(this).closest('tr').remove();
This will start at the element which invoked the event and traverse the DOM upwards until it finds the first tr element, then remove that element.
Edit: You also are using duplicate ids on your a tags:
<a href="#" id="deleteEvent">
You can replace them with a class:
<a href="#" class="deleteEvent">
And change your selector to:
$(".deleteEvent").click(function(e) {
// code
});
Or you can probably remove the id or class entirely since you can still identify the elements without it:
$("#students a").click(function(e) {
// code
});
USE THIS
<script type="text/javascript">
$(function() {
$("#deleteEvent").click(function(e) {
$(this).parent('tr').remove();
});
</script>
please replace your function with function given below. its working. I have checked it.
$(function() {
$("table a").click(function(e) {
$(this).parent().parent().remove();
return false;
});
});

Removing <tr> using javascript

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>

Delete a table row with javascript / jquery

This is not working. Firebug is not throwing any error though.
HTML:
<table>
<tr><td>BookA</td><td>Delete</td></tr>
<tr><td>BookB</td><td>Delete</td></tr>
<tr><td>BookC</td><td>Delete</td></tr>
<tr><td>BookD</td><td>Delete</td></tr>
</table>
Javascript:
function deleteRow(ref) {
$(ref).parent().parent().remove();
}
If possible, I would like to use a solution with inline javascript
First of all, inline JavaScript (href="javascript:x" or onclick="x") is generally bad. With inline JavaScript, you won't have access to the event object, and you can't really be sure what this references to.
jQuery (and almost every other JavaScript library/framework) has built-in event handling. So, your code would look like this with event handlers:
$('a.red').click(function(e) {
e.preventDefault(); // don't follow the link
$(this).closest('tr').remove(); // credits goes to MrKurt for use of closest()
});
And here's a demo: http://jsbin.com/okaxu
Try this:
// Bind all the td element a click event
$('table td.deleteRow').click(function(){
$(this).parent().remove();
});
By the way, it'll remove the javascript from your html code.
With this html code
<table>
<tr>
<td>BookA</td>
<td class="red deleteRow">Delete</td>
</tr>
<tr>
<td>BookB</td>
<td class="red deleteRow">Delete</td>
</tr>
<tr>
<td>BookC</td>
<td class="red deleteRow">Delete</td>
</tr>
<tr>
<td>BookD</td>
<td class="red deleteRow">Delete</td>
</tr>
</table>
remove inline scripting
<script>
$(function(){
$('table td a').live('click', function(){
$(this).parents('tr').remove();
return false;
});
});
</script>
This won't work because $(this) isn't referring to the a-tag as you think (I think its referring to the window object or something)
Instead of using inline javascript in the href-attribute do this
Instead do this
<script type="text/javascript">
$("table a").click( function() {
$(this).parent().parent().remove();
});
</script>
I believe you have a bug in your deleteRow function. Here's how it should be written:
function deleteRow(ref) {
ref.parent().parent().remove();
}
The ref that you are passing into deleteRow is already a jQuery object. You shouldn't use $(ref), just ref alone since ref is already a jQuery object.
I would have to agree that inline javascript should be avoided, but if there is some other reason that it is necessary or beneficial to use it, here's how.
<table>
<tr><td>BookA</td><td>Delete</td></tr>
<tr><td>BookB</td><td>Delete</td></tr>
<tr><td>BookC</td><td>Delete</td></tr>
<tr><td>BookD</td><td>Delete</td></tr>
</table>

Categories

Resources