Removing <tr> using javascript - 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>

Related

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.

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

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>

Select all table rows between headers using JQuery

Having the following automatically generated table layout (I have nearly no influence over it)
<table>
<tr>
<th>First Header</th>
<th>
show/hide
</th>
</tr>
<tr>
<td>A question?</td>
<td><input value="User's answer" /></td>
</tr>
<!-- Some more rows -->
<tr>
<th>Second Header</th>
</tr>
<!-- Some more question blocks -->
</table>
... I'd like to select all the <tr>-elements between two headers using Javascript/jQuery
in order to provide such features like:
Hiding all the questions belonging to a certain header.
Automatically edit the <input>s (eg. check/uncheck all or restore default)
The links causing the desired actions are already in the correct headers.
What would be the best way to approach this issue?
You can use nextUntil() to solve this problem.
function getRows(start){
return start.nextUntil(function(i, v){
return $('th', v).length > 0;
});
}
Demo: Fiddle
Implementation of Show/Hide
$('table').on('click', '.used-for-some-action', function(){
getRows($(this).closest('tr')).toggle();
return false;
});
Demo: Fiddle
Update:
Based on comments by #BLSully
$('table').on('click', '.used-for-some-action', function(){
$(this).closest('tr').nextUntil('tr:has(th)').toggle();
return false;
});
Demo: Fiddle
I like Arun P Johny's answer. Here's what I originally thought (this code implements the hide/show functionality)
$(".used-for-some-action").click(function(e) {
e.preventDefault()
$(this).parents("tr").next().is(":visible") ? $(this).parents("tr").next().hide() : $(this).parents("tr").next().show();
});
Fiddle: http://jsfiddle.net/DQMht/1/
I would keep it real simple. You're using JavaScript, so when the page loads, just add a class to rows with a <th>, then use the class.
$(function() {
$("th").parent().addClass("hasTH");
});
Then you can simply target rows that have the hasTH class.
Another option would be to still do it when the page loads, but instead of adding a class, group the rows into new <tbody> elements. This would give you the most pure DOM representation.
Try this:
$("tr:has(th)").each(function(){
if ($(this).find('th').length==2) {
// here you have this: that represent the row which have two td
}
})

Add a barcode mulitple times based on the class before

I have a list of numbers and I need to automatically have them each turned into a barcode. I can get the first one to change, but I cannot get the ones after to change. I have a jquery barcode generator. I am pretty new to this. Please help.
<table width=180 border=0 cellpadding=0 cellspacing=0>
<tr>
<td class="barcode_needed">10133</td>
</tr>
<tr>
<td class="barcode_needed">20133</td>
</tr>
<tr>
<td class="barcode_needed">30133</td>
</tr>
</table>
<link rel="stylesheet" type="text/css" href="http://barcode-coder.com/css/style.css?ft=1298939919" />
<script type="text/javascript" src="http://barcode-coder.com/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="http://barcode-coder.com/js/jquery-ui-1.7.custom.min.js"></script>
<script type="text/javascript" src="http://barcode-coder.com/js/jquery-barcode-last.min.js"></script>
<script>
$("td.barcode_needed").after("<div id='bcTarget1'>");
$("#bcTarget1").barcode(('G' + $("td.barcode_needed").html()), "code128");
</script>
Your problem is that you are creating multiple <div> elements with the same id attribute. When you do this:
$("#bcTarget1")
jQuery will only find the first one and so you only get one barcode. You're also mixing up your elements by inserting a <div> as a child of a <tr>.
First, fix your HTML structure (including the duplicate id attributes):
$('td.barcode_needed').append('<div class="bcTarget">');
This puts your <div> inside the <td> (so that your element nesting is correct) and replaces the id attribute with a class.
Then, fix the barcodes by referencing the next structure.
$('.bcTarget').each(function() {
var $this = $(this);
$this.barcode(
'G' + $this.closest('td.barcode_needed').text(),
'code128'
);
});
The closest call goes up the tree to find the closest ancestor that matches the selector. You can just use text on the table cells that you find as the <div>s you just added will still be empty when you call .text.
Live example: http://jsfiddle.net/ambiguous/eaYTZ/
You'll probably want to play with the styling a bit of course.

How to remove an element without id

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

Categories

Resources