how to delete Parent table without removing children table content? - javascript

How to delete Parent Table with all table attribute, without removing children table using jquery/javascript
<table>
<tr>
<td>Data</td>
<td>
<table>
<tr>
<td>A</td><td>B</td>
</tr>
</table>
</td>
</tr>
</table>
Output::
<table>
<tr>
<td>A</td><td>B</td>
</tr>
</table>


You can take inner table with unwrap and change html of parent element body in this case which will delete old table.
$('body').html($('table table').unwrap())
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>Data</td>
<td>
<table>
<tr>
<td>A</td>
<td>B</td>
</tr>
</table>
</td>
</tr>
</table>
Or you can take inner table, delete old one and then add inner table to parent element.
var table = $('table table').unwrap();
$('table').remove()
$('body').html(table)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>Data</td>
<td>
<table>
<tr>
<td>A</td>
<td>B</td>
</tr>
</table>
</td>
</tr>
</table>

Related

Concatenation of two tables in Javascript and html

I have two html tables which I render in my react component and I want to create a third html table which is the concatenation of the first two tables. To be more specific I have a table:
<table>
<tbody>
<tr>
<td>Collaterals Value</td>
<td>Buying Power/Available Power</td>
<td>Market to Market</tr>
<td>Outstanding Order Margin</td>
</tr>
</tbody>
</table>
and another table like this:
<table>
<tbody>
<tr>
<td>fdsfdsfds</td>
<td>fdsfdsfds/td>
<td>fdsfsdfds</tr>
<td>fdsfdsfds</td>
</tr>
</tbody>
</table>
I want to create a table like
<table>
<tbody>
<tr>
<td>Collaterals Value</td>
<td>Buying Power/Available Power</td>
<td>Market to Market</tr>
<td>Outstanding Order Margin</td>
</tr>
<tr>
<td>fdsfdsfds</td>
<td>fdsfdsfds/td>
<td>fdsfsdfds</tr>
<td>fdsfdsfds</td>
</tr>
</tbody>
</table>
Any ideas of how I can implement this?

All you have to do is get the append the tr from the second table to the tbody of the first table. Javascript will take care of doing the removal from the second table as a part of the appendChild.
var tables = document.querySelectorAll("tbody");
tables[0].appendChild(tables[1].querySelector("tr"));
Table 1
<table>
<tbody>
<tr>
<td>Collaterals Value</td>
<td>Buying Power/Available Power</td>
<td>Market to Market</tr>
<td>Outstanding Order Margin</td>
</tr>
</tbody>
</table>
Table 2
<table>
<tbody>
<tr>
<td>fdsfdsfds</td>
<td>fdsfdsfds</td>
<td>fdsfsdfds</td>
<td>fdsfdsfds</td>
</tr>
</tbody>
</table>

Rearrange table rows in hardcoded table

I am unable to edit the HTML directly in a form and would like to move some things around. I created a very simplified version of what is going on below. So for example, if I would like to move the row with class "comments" to just below the row with class "matching" how could I do this on page load?
I tried doing something like:
$('tr.comments').closest('tr').after($('tr.matching').closest('tr'));
Here is the basic code, thank you for your help!! :)
<table>
<tbody>
<tr class="designation">
<td>Some text</td>
</tr>
<tr class="comments">
<td>More text</td>
</tr>
</tbody>
<tbody>
<tr class="levels">
<td>level 1</td>
</tr>
<tr class="amount">
<td>$500</td>
</tr>
</tbody>
<tbody>
<tr class="matching">
<td>donor</td>
</tr>
<tr class="mailing">
<td>yes</td>
</tr>
</tbody>

Try with this $('tr.matching').after($('tr.comments'));.
$('tr.matching').after($('tr.comments'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr class="designation">
<td>Some text</td>
</tr>
<tr class="comments">
<td>More text</td>
</tr>
</tbody>
<tbody>
<tr class="levels">
<td>level 1</td>
</tr>
<tr class="amount">
<td>$500</td>
</tr>
</tbody>
<tbody>
<tr class="matching">
<td>donor</td>
</tr>
<tr class="mailing">
<td>yes</td>
</tr>
</tbody>
</table>

$(".matching").after($(".comments"));

How to get text of first element using jQuery

I am trying to get the text in the first td in the parent tr which the clicked span element is located.
I thought the following would work, but it returns text in all td elements of the given tr. How do I do this without doing something like $t.closest('tr').find('td').eq(0).text()?
http://jsfiddle.net/9dh7pz73/3/
$("table span").click(function(){
var $t=$(this);
console.log($t.closest('tr'),$t.closest('tr').first('td').text());
});
<table>
<tr>
<td>a</td>
<td>0</td>
<td><span>xxx</span></td>
</tr>
<tr>
<td>b</td>
<td>0</td>
<td><span>xxx</span></td>
</tr>
<tr>
<td>c</td>
<td>0</td>
<td><span>xxx</span></td>
</tr>
</table>

The first() method doesn't take a selector. Instead you could do find('td:first'), like this:
$("table span").click(function(){
var $t = $(this);
console.log($t.closest('tr').find('td:first').text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>a</td>
<td>0</td>
<td><span>xxx</span></td>
</tr>
<tr>
<td>b</td>
<td>0</td>
<td><span>xxx</span></td>
</tr>
<tr>
<td>c</td>
<td>0</td>
<td><span>xxx</span></td>
</tr>
</table>

If you want to target the first <td> element when a specific span is clicked, you could just wire up an event handler to pick up the click and then find the first <td> via the td:first selector:
$('table span').click(function(){
// This will find the closest <tr> and then the first <td> element that appears within
console.log($(this).closest('tr').find('td:first').text());
});
Example
$('table span').click(function() {
console.log($(this).closest('tr').find('td:first').text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>a</td>
<td>0</td>
<td><span>xxx</span>
</td>
</tr>
<tr>
<td>b</td>
<td>0</td>
<td><span>xxx</span>
</td>
</tr>
<tr>
<td>c</td>
<td>0</td>
<td><span>xxx</span>
</td>
</tr>
</table>

Find next row class after specific row class in each table rows

I need to hide unused toggle buttons with jQuery.
e.g. show toggle buttons only if after header <tr class="header"> next is data <tr class="data">
I have dynamic populated table that is as the code below:
<table>
<tr class="header">
<td><a class="toggle">toggle</a></td>
<td>Header</td>
</tr>
<tr class="data">
<td></td>
<td>data</td>
</tr>
<tr class="data">
<td></td>
<td>data</td>
</tr>
<tr class="data">
<td></td>
<td>data</td>
</tr>
<tr class="header">
<td><a class="toggle">toggle</a></td>
<td>Header</td>
</tr>
<tr class="header">
<td><a class="toggle">toggle</a></td>
<td>Header</td>
</tr>
<tr class="data">
<td></td>
<td>data</td>
</tr>
<tr class="data">
<td></td>
<td>data</td>
</tr>
<tr class="header">
<td><a class="toggle">toggle</a></td>
<td>Header</td>
</tr>
<tr class="header">
<td><a class="toggle">toggle</a></td>
<td>Header</td>
</tr>
<tr class="data">
<td></td>
<td>data</td>
</tr>
</table>

This will hide toggle buttons in which their parent rows with class header don't precede a row with class data:
$('.header').each(function() {
if(!$(this).next().hasClass('data')) {
$(this).find('.toggle').hide();
}
});
Fiddle

Find immediate children and go no further using jQuery

How do I get the immediate children when searching for a particular element? For example, I want to get the tr elements for the table t1.
<table id="t1" bgcolor="yellow">
<tbody>
<tr>
<td>This is Cell 1</td>
<td>This is Cell 2</td>
</tr>
<tr>
<td>This is Cell 3</td>
<td>
<table id="t2" bgcolor="red">
<tbody>
<tr>
<td>This is Cell 1</td>
<td>This is Cell 2</td>
</tr>
<tr>
<td>This is Cell 3</td>
<td>This is Cell 4</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
I tried this:
'Count = ' + $('#t1 tbody').children('tr').length;
However, I get a count of 4, I don't understand why?
Here is a full example:

Use:
'Count = ' + $('#t1 > tbody').children('tr').length;
// or: $("#t1 > tbody > tr").length
// or: $("#t1")[0].rows.length; // In this case, equal to previous code.
// Warning: This also includes the rows from
// the <thead> and <tfoot> sections.
Your current code shows 4, because you have got two <tbody> elements in the table #t1:
<table id="t1" bgcolor="yellow"> <-- #t1
<tbody> <--- tbody
<tr> ... </tr> <----- Child 1
<tr> ... <----- Child 2
<tbody> <--- tbody (unexpected?)
<tr> ... </tr> <----- Child 3
<tr> ... </tr> <----- Child 4
</tbody>
</table>
</td>
</tr>
</tbody>
</table>

That is because with $('#t1 tbody') you get the tbody from both tables
You could use directly the Child Selector (“parent > child”) docs
$('#t1 > tbody > tr').length;
and here is you updated example: http://jsfiddle.net/SvygZ/1/

Categories

Resources