Swap table rows using javascript - javascript

Am trying to do like this,
<table>
<tr id="ID1"><td></td></tr>
<tr id="ID2"><td></td></tr>
</table>
I need to swap table rows index position like as follows
<table>
<tr id="ID2"><td></td></tr>
<tr id="ID1"><td></td></tr>
</table>
I tried to fix it using jQuery as:
$('#ID1').after('#ID2');
Can anyone help me to fix the above requirement using javascript?
$('#ID1').after('#ID2');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr id="ID1">
<td></td>
</tr>
<tr id="ID2">
<td></td>
</tr>
</table>

after() is used to insert content. To move or add elements, use insertAfter():
$('#ID1').insertAfter('#ID2');
Example fiddle

Swap row by appendChild.
var x = document.getElementById("first");
var table = document.getElementById("table");
table.appendChild(x);
<table id="table">
<tr id="first"><td>First</td></tr>
<tr id="second"><td>Second</td></tr>
</table>

Related

Can anyone help me convert a table such as this example into a dynamic one in Javascript by using the for loop?

Can anyone help me learn how to convert an HTML table into a dynamic Javascript table using the for loop? This is an example I found in my book and wanted to see how I could go about doing this.
Heading There is sections of the table that need to have the rows combined and he columns combined. I have been struggling with this for some time. Any help would be appreciated. I did not include the CSS portion of the code only the table.
<html>
<body>
<table class="table">
<tr>
<th colspan= "3" class= "MH">Conversion Tables</th>
</tr>
<tr>
<th rowspan="3" class="heading1">Meters to
<br />Feet</th>
<td>1 meter</td>
<td>3.28 feet</td>
</tr>
<tr class="difrow">
<td>50 meters</td>
<td>164.04 feet</td>
</tr>
<tr>
<td>100 meters</td>
<td>328.08 feet</td>
</tr>
<tr class="difrow">
<th rowspan="3" class="heading1">Kilometers to
<br />Miles</th>
<td>1 kilometer</td>
<td>0.62 miles</td>
</tr>
<tr>
<td>50 kilometers</td>
<td>31.07 miles</td>
</tr>
<tr class="difrow">
<td>100 kilometers</td>
<td>62.14 miles</td>
</tr>
</table>
</body>
</html>
you can add id attribute to table tag then call a javascript method on page load:
<table class="table" id="tableId">
function createRows(){
var items = "<tr><td></td></tr>...";
document.getElementById("tableId").innerHTML = items;
}
in javascript method you can use for to generate table rows.

Get row elements without using "closest" selector - jquery javascript

I have a table with 4 columns . 4th column is a button (not shown in below code). When I click on the button in a row, I want to get row elements.
I have done it using closest selector. Is there any way to find table row element "Without using closest". This is the requirement for some reason.
Please assume there is a button at end of each row
<table id="food">
<thead>
<tr>
<th>Number</th>
<th>Name</th>
<th>Type</th>
</tr>
</thead>
<tbody>
<tr class='details'>
<td>1</td>
<td>Apple</td>
<td>Fruit</td>
</tr>
<tr class='details'>
<td>2</td>
<td>Mango</td>
<td>Fruit</td>
</tr>
<tr class='details'>
<td>3</td>
<td>Grape</td>
<td>Fruit</td>
</tr>
</tbody>
</table>
Here is the existing code, I need to replace closest. It will be awesome if I can use class names like $(this).somethin('.details');
$('#button1').click(function(){
var row = $(this).closest('tr');
//Do some stuff
})
Thanks
Use parents() and pass a class selector like
$('#button1').click(function(){
var row = $(this).parents('.details');
//Do some stuff
})
Note, you could also use closest in this case and pass the class selector
var row = $(this).closest('.details');

Adding multiple attributes to Javascript/Jquery

I'm currently working on a set of tables and i've gotten them to expand and contract at the click of a button. I'm having problems however to create a button that expands all the tables at the same time. Please see my code.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head> <!--this first part is easy to implement-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".toggler").click(function(e){
e.preventDefault();
$('.vis'+$(this).attr('vistoggle')).toggle();
});
});
</script>
</head>
<body>
Expand all <!--vistoggle needs to have values 1 and 2 in it-->
<table>
<tr>
<td>safeaef</td>
<td>asdfaef</td>
<td>asfead</td>
<td>Expand</td>
</tr>
<tr class="vis1" style="display:none">
<td>asdfae</td>
<td>zxcvry</td>
<td>rteyertr</td>
<td></td>
</tr>
<tr class='vis1' style='display:none'>
<td>tsersg</td>
<td>sdgfs</td>
<td>wregssdf</td>
<td></td>
</tr>
<tr class="vis1" style="display:none">
<td>sdfgrs</td>
<td>sgdfgsr</td>
<td>Cewret</td>
<td></td>
</tr>
</table>
<table>
<tr>
<td>cfasdfas</td>
<td>1adfaed</td>
<td>asdfasdfea</td>
<td>Expand</td>
</tr>
<tr class="vis2" style="display:none">
<td>asdfaefas</td>
<td>1asdf</td>
<td>Cisdfae</td>
<td>22fasdew</td>
</tr>
<tr class="vis2" style="display:none">
<td>asdfaef</td>
<td>1sefa0</td>
<td>Ciasdf 2</td>
<td></td>
</tr>
</table>
</body>
</html>
You could try building a selector like this:
$('tr[class^="vis"]')
it would select all elements, which class attributes begins with 'vis'.
But from what I see you want the first row to always stay visible, so I would propose to simply separate the table header and it's body like this:
<table>
<thead><tr>...</tr></thead>
<tbody id="table-one" class="vis">
<tr>...</tr>
<tr>...</tr>
</tbody>
</table>
<table>
<thead><tr>...</tr></thead>
<tbody id="table-two" class="vis">
<tr>...</tr>
<tr>...</tr>
</tbody>
</table>
and then you could use a simple:
$('tbody.vis').toggle();
to toggle all the tables, and for toggle`ing just one of them you can use:
$('tbody#tbody-one').toggle();
which is probably much better idea for performance reasons (ID is found much faster than classes).
The ID attribute of TBODY can be stored just like you store it right now (in a button's attribute).
Fiddle example:
http://jsfiddle.net/SL4UZ/3/
Edit
To make your HTML valid, you should use data-attributes or bind your events using javascript instead of simply adding customs attributes inside your button tags. For example:
<button data-toggle-id="tbody-one">Toggle</button>
I updated my fiddle.
You can check the attr that needs to be toggled and if it matches all open 1 and 2, this works if your table is not dynamic
Expand all
$(document).ready(function(){
$(".toggler").click(function(e){
e.preventDefault();
if($(this).attr('vistoggle') == "all"){
$('.vis1').toggle();
$('.vis2').toggle();
}else{
$('.vis'+$(this).attr('vistoggle')).toggle();
}
});
});
Fiddle : http://jsfiddle.net/6hpbq/
Separate your classes eg vis1 becomes vis one (two classes) Then do a conditional check on the value of the data attribute. If its set to all, toggle all elements with the class vis, else toggle the specific ones:
<script>
$(document).ready(function(){
$(".toggler").click(function(e){
e.preventDefault();
var vistog = $(this).attr('vistoggle');
if(vistog == 'all'){
$('.vis').toggle();
}else{
$('.vis.' + vistog).toggle();
}
});
});
</script>
</head>
<body>
Expand all <!--vistoggle set to all -->
<table>
<tr>
<td>safeaef</td>
<td>asdfaef</td>
<td>asfead</td>
<td>Expand</td>
</tr>
<tr class="vis one" style="display:none">
<td>asdfae</td>
<td>zxcvry</td>
<td>rteyertr</td>
<td></td>
</tr>
<tr class='vis one' style='display:none'>
<td>tsersg</td>
<td>sdgfs</td>
<td>wregssdf</td>
<td></td>
</tr>
<tr class="vis one" style="display:none">
<td>sdfgrs</td>
<td>sgdfgsr</td>
<td>Cewret</td>
<td></td>
</tr>
</table>
<table>
<tr>
<td>cfasdfas</td>
<td>1adfaed</td>
<td>asdfasdfea</td>
<td>Expand</td>
</tr>
<tr class="vis two" style="display:none">
<td>asdfaefas</td>
<td>1asdf</td>
<td>Cisdfae</td>
<td>22fasdew</td>
</tr>
<tr class="vis two" style="display:none">
<td>asdfaef</td>
<td>1sefa0</td>
<td>Ciasdf 2</td>
<td></td>
</tr>
</table>
</body>
</html>

How to use Javascript to make several rows in an HTML table invisible

I have an HTML table and there are several rows in that table that I want to toggle to either be visible or invisible as a group. Since I can't simply put a <div> around them, what would be a good way to 'group' them together.
try making your html in such a way you can hide/visible and apply your css/js.
<table>
<tr class="visible"><td></td></tr>
<tr class="visible"><td></td></tr>
<tr class="hidden"><td></td></tr>
<tr class="visible"><td></td></tr>
<tr class="visible"><td></td></tr>
<tr class="hidden"><td></td></tr>
<tr class="visible"><td></td></tr>
</table>
You can group them in separate <tbody> elements (since you can't use <div> elements, as you stated).
<table id="mytable">
<tbody>
<!-- some rows to group -->
</tbody>
<tbody>
<!-- some rows to group -->
</tbody>
<tbody>
<!-- some rows to group -->
</tbody>
</table>
Then select the tbody you want.
var table = document.getElementById("mytable");
table.tBodies[1].style.display="none";
You could use the tbody tag. You can set the id attribute on it.
tbody id="customer1"
<table>
<thead>
<tr><th>Customer</th><th>Order</th><th>Month</th></tr>
</thead>
<tbody id="customer1">
<tr><td>Customer 1</td><td>#1</td><td>January</td></tr>
<tr><td>Customer 1</td><td>#2</td><td>April</td></tr>
<tr><td>Customer 1</td><td>#3</td><td>March</td></tr>
</tbody>
<tbody id="customer2">
<tr><td>Customer 2</td><td>#1</td><td>January</td></tr>
<tr><td>Customer 2</td><td>#2</td><td>April</td></tr>
<tr><td>Customer 2</td><td>#3</td><td>March</td></tr>
</tbody>
<tbody id="customer3">
<tr><td>Customer 3</td><td>#1</td><td>January</td></tr>
<tr><td>Customer 3</td><td>#2</td><td>April</td></tr>
<tr><td>Customer 3</td><td>#3</td><td>March</td></tr>
</tbody>
</table>
Then with JQuery you can easily hide/show.
I would recommend a jQuery solution to you. Provide all of your <tr> tags a common class and a unique id (for individual selection). Then you can use jQuery to grab them.
$('tr .commonClass').css("display", "none");
You could also just swap classes with the individual ids
$('#someTR').removeClass("visibleClass");
$('#someTR').addClass("invisibleClass");
Note: For the record I prefer #Yograj Gupta's method, but he beat me to the punch posting.
Pure JavaScript jsfiddle
<table>
<tr class="show"><td></td></tr>
<tr class="show"><td></td></tr>
<tr class="hide"><td></td></tr>
<tr class="show"><td></td></tr>
<tr class="show"><td></td></tr>
<tr class="hide"><td></td></tr>
<tr class="show"><td></td></tr>
</table>
JS:
var trGroup = document.getElementsByClassName("hide");
for(var k=0; k < trGroup.length; k++){
trGroup[k].style.display = "none";
}
Place a common class on the rows which you want to group. than work on that like
or you have some set of rules for visible or hidden, rows group you can simple use css + javascript like
HTML
<table id="myGroupTab">
<tr class="group1"><td> </td></tr>
<tr class="group1"><td> </td></tr>
<tr class="group2"><td> </td></tr>
<tr class="group2"><td> </td></tr>
<tr class="group1"><td> </td></tr>
</table>
you can write some css rules like
CSS
#myGroupTab.showGrp1 .group1{ display:block;}
#myGroupTab.showGrp1 .group2{ display:none;}
#myGroupTab.showGrp2 .group1{ display:none;}
#myGroupTab.showGrp2 .group2{ display:block;}
You can use Javascript like
JS
document.getElementById('myGroupTab').className = "showGrp1"; //To Show Only tr.group1
document.getElementById('myGroupTab').className = "showGrp2"; //To Show Only tr.group2
Its even simple to make display none or block applying a class on parent, instead of looping every tr...
Or by jQuery you can achieve this, make them visible or hidden using jQuery.
$("tr.group1").hide() or $("tr.group2").show()
#user1689607 solution using multiple tbody(s) in table is also a good solution.

Hide second and third row of table

<div class="NewsResultsList">
<table>
<tr>
<td>
Results:<br/>
First<br/>
Second
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>No Results</td>
</tr>
</table>
</div>
I need to hide the second row and the third row.
$('div.NewsResultsList table tr:eq(1)').hide();
$('div.NewsResultsList table tr:eq(2)').hide();
That didn't do it? What is wrong?
Here are a couple of ways to do it:
jsBin demo
$('.NewsResultList tr:gt(0)').hide();
$('.NewsResultList tr').slice(-2).hide();
$('.NewsResultList tr').not(':eq(0)').hide();
$('.NewsResultList tr td:contains("No")').parent('tr').hide();
$('.NewsResultList tr').not(':first').hide();
$('.NewsResultList tr').eq(-1).hide().end().eq(-2).hide();
$('.NewsResultList tr:last').prev().andSelf().hide();
Use this Script:
<script type="text/javascript">
$(document).ready(function (e) {
$('.NewsResultsList tr:eq(1)').hide();
$('.NewsResultsList tr:eq(2)').hide();
});
</script>
You spelled NewsResultList wrong in your jQuery call. ("NewsResultsList")... ;)
You have wrong selctors to get to that table rows:
It should actually be
$('div table tr:eq(1)').hide();
$('div table tr:eq(2)').hide();
DEMO
Two issues:
You have NewsResultsList in your selector, but the class is NewsResultList. The two don't match.
And, you are missing a </td> in the table.
Fix those two issues and it works here: http://jsfiddle.net/jfriend00/pfemk/
Try this for in your html/PHP:
<table>
<tr>
<td>
Results:<br/>
First<br/>
Second
</td>
</tr>
<tr class="hideMe">
<td> </td>
<td></td>
</tr>
<tr class="hideMe">
<td>No Results</td>
</tr>
</table>
</div>
and this in your jQuery/javascript:
$('#something').click( function() {
$('.hideMe').hide();
});

Categories