Show and hide subrows using jQuery - javascript

I'm trying to use jQuery for solving the following problem. Currently I don't have any useful code for posting here.
Initially only the Master Rows (class term1_master and term2_master) should be visible.
By pressing the "Show" link the correlating group of rows should toogle the visibility (e. g. pressing Show button in tr-class term1_master should show all tr-elements owning class term1).
The number of blocks is not fix, there can also appear term3_master, term4_master ... with their sub items.
This is my sample HTML code:
<table>
<tr class="term1_master">
<td>Master Row 1</td>
<td>Show</td>
</tr>
<tr class="term1">
<td>Sub Row 1</td>
<td>Example</td>
</tr>
<tr class="term1">
<td>Sub Row 2</td>
<td>Example</td>
</tr>
<tr class="term1">
<td>Sub Row 3</td>
<td>Example</td>
</tr>
<tr class="term2_master">
<td>Master Row 2</td>
<td>Show</td>
</tr>
<tr class="term2">
<td>Sub Row 1</td>
<td>Example</td>
</tr>
<tr class="term2">
<td>Sub Row 2</td>
<td>Example</td>
</tr>
<tr class="term2">
<td>Sub Row 3</td>
<td>Example</td>
</tr>
</table>
Thanks a lot for helping me!


You don't have to use separate classes, at all, all master rows can have one .master class. Then you can use great nextUntil() method to get what you want:
$('a').click(function(e) {
e.preventDefault();
if($(this).text()=='Show') {
$(this).closest('.master').nextUntil('.master').show();
$(this).text('Hide');
}
else {
$(this).closest('.master').nextUntil('.master').hide();
$(this).text('Show');
}
});
Demo:
$('a').click(function(e) {
e.preventDefault();
if($(this).text()=='Show') {
$(this).closest('.master').nextUntil('.master').show();
$(this).text('Hide');
}
else {
$(this).closest('.master').nextUntil('.master').hide();
$(this).text('Show');
}
});
tr {
display:none;
}
tr.master {
display:block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr class="master">
<td>Master Row 1</td>
<td>Show</td>
</tr><tr class="term1">
<td>Sub Row 1</td>
<td>Example</td>
</tr><tr class="term1">
<td>Sub Row 2</td>
<td>Example</td>
</tr><tr class="term1">
<td>Sub Row 3</td>
<td>Example</td>
</tr>
<tr class="master">
<td>Master Row 2</td>
<td>Show</td>
</tr><tr class="term2">
<td>Sub Row 1</td>
<td>Example</td>
</tr><tr class="term2">
<td>Sub Row 2</td>
<td>Example</td>
</tr><tr class="term2">
<td>Sub Row 3</td>
<td>Example</td>
</tr>
<tr class="master">
<td>Master Row 3</td>
<td>Show</td>
</tr><tr class="term3">
<td>Sub Row 1</td>
<td>Example</td>
</tr><tr class="term3">
<td>Sub Row 2</td>
<td>Example</td>
</tr><tr class="term3">
<td>Sub Row 3</td>
<td>Example</td>
</tr>
</table>


You could use following logic inside relevant click handler to show only specific targeted follow row, depending relevant class:
$(function() { // ready handler
$('table a').on('click', function(e) {
e.preventDefault();
var $tr = $(this).closest('tr');
var trClass = $tr.attr('class').split('_').shift();
$tr.nextAll('.' + trClass).show();
})
});
-jsFiddle-


The following should work for the current HTML and appending term3_master, term4_master ... with their sub items.
$(function() {
$('tr').not('[class$="_master"]').hide();
$('table a').on('click', function(e) {
e.preventDefault();
if($(this).text() === "Show") {
$(this).text("Hide");
var $tr = $(this).closest('tr');
var trClass = $tr.attr('class').split('_').shift();
$tr.nextAll('.' + trClass).show();
} else {
$(this).text("Show")
var $tr = $(this).closest('tr');
var trClass = $tr.attr('class').split('_').shift();
$tr.nextAll('.' + trClass).hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr class="term1_master">
<td>Master Row 1</td>
<td>Show</td>
</tr><tr class="term1">
<td>Sub Row 1</td>
<td>Example</td>
</tr><tr class="term1">
<td>Sub Row 2</td>
<td>Example</td>
</tr><tr class="term1">
<td>Sub Row 3</td>
<td>Example</td>
</tr>
<tr class="term2_master">
<td>Master Row 2</td>
<td>Show</td>
</tr><tr class="term2">
<td>Sub Row 1</td>
<td>Example</td>
</tr><tr class="term2">
<td>Sub Row 2</td>
<td>Example</td>
</tr><tr class="term2">
<td>Sub Row 3</td>
<td>Example</td>
</tr>
</table>

Related

How do I hide a table row if there is a null value or a specific value

I'm not much of a javascript coder, but I'm trying to write something to make my work a little easier...
I have a table of data. The third cell of the table ('offersTable') is a display flag, which will either be 'Y', 'N', or empty. The source for the table is incomplete, which is why sometimes the cell is empty (null).
I'm trying to write a small script that will iterate down through the table, and then set the row to hide if the value if the cell is either 'N' or null. That way, only rows which have a 'Y' remain.
Please can someone help me? I'm going out of my mind trying to work this one out!
Sorry, I should have included my code...
<table id="offersTable">
<tr>
<th onclick="sortTable(0)">Lender</th>
<th onclick="sortTable(1)">Lender Code</th>
<th onclick="sortTable(2)">Display</th>
<th onclick="sortTable(3)">Loan Offered</th>
<th onclick="sortTable(4)">Term Offered</th>
<th onclick="sortTable(5)">Approval Probability</th>
<th onclick="sortTable(6)">APR</th>
<th onclick="sortTable(7)">Monthly Repayment</th>
<th onclick="sortTable(8)">Total Repayable</th>
</tr>
<tr id="lender1">
<td id="lender1Name"><script>document.getElementById("lender1Name").innerHTML = offers[0].lender_name;</script>
</td>
<td id="lender1Code"><script>document.getElementById("lender1Code").innerHTML = offers[0].lender_code;</script>
</td>
<td id="lender1Display"><script>document.getElementById("lender1Display").innerHTML = offers[0].display;</script>
</td>
<td id="lender1Value"><script>document.getElementById("lender1Value").innerHTML = offers[0].loan_offered;</script>
</td>
<td id="lender1Term"><script>document.getElementById("lender1Term").innerHTML = offers[0].term_offered;</script>
</td>
<td id="lender1AppProb"><script>document.getElementById("lender1AppProb").innerHTML = offers[0].approval_probability;</script>
</td>
<td id="lender1APR"><script>document.getElementById("lender1APR").innerHTML = offers[0].apr;</script>
</td>
<td id="lender1MonthlyRepay"><script>document.getElementById("lender1MonthlyRepay").innerHTML = offers[0].monthly_repayment;</script>
</td>
<td id="lender1TotalRepay"><script>document.getElementById("lender1TotalRepay").innerHTML = offers[0].total_repayment;</script>
</td>
</tr>
<tr id="lender2">
<td id="lender2Name"><script>document.getElementById("lender2Name").innerHTML = offers[1].lender_name;</script>
</td>
<td id="lender2Code"><script>document.getElementById("lender2Code").innerHTML = offers[1].lender_code;</script>
</td>
<td id="lender2Display"><script>document.getElementById("lender2Display").innerHTML = offers[1].display;</script>
</td>
<td id="lende2Value"><script>document.getElementById("lender2Value").innerHTML = offers[1].loan_offered;</script>
</td>
<td id="lender2Term"><script>document.getElementById("lender2Term").innerHTML = offers[1].term_offered;</script>
</td>
<td id="lender2AppProb"><script>document.getElementById("lender2AppProb").innerHTML = offers[1].approval_probability;</script>
</td>
<td id="lender2APR"><script>document.getElementById("lender2APR").innerHTML = offers[1].apr;</script>
</td>
<td id="lender2MonthlyRepay"><script>document.getElementById("lender2MonthlyRepay").innerHTML = offers[1].monthly_repayment;</script>
</td>
<td id="lender2TotalRepay"><script>document.getElementById("lender2TotalRepay").innerHTML = offers[1].total_repayment;</script>
</td>
</tr>
<tr id="lender3">
<td id="lender3Name"><script>document.getElementById("lender3Name").innerHTML = offers[2].lender_name;</script>
</td>
<td id="lender3Code"><script>document.getElementById("lender3Code").innerHTML = offers[2].lender_code;</script>
</td>
<td id="lender3Display"><script>document.getElementById("lender3Display").innerHTML = offers[2].display;</script>
</td>
<td id="lender3Value"><script>document.getElementById("lender3Value").innerHTML = offers[2].loan_offered;</script>
</td>
<td id="lender3Term"><script>document.getElementById("lender3Term").innerHTML = offers[2].term_offered;</script>
</td>
<td id="lender3AppProb"><script>document.getElementById("lender3AppProb").innerHTML = offers[2].approval_probability;</script>
</td>
<td id="lender3APR"><script>document.getElementById("lender3APR").innerHTML = offers[2].apr;</script>
</td>
<td id="lender3MonthlyRepay"><script>document.getElementById("lender3MonthlyRepay").innerHTML = offers[2].monthly_repayment;</script>
</td>
<td id="lender3TotalRepay"><script>document.getElementById("lender3TotalRepay").innerHTML = offers[2].total_repayment;</script>
</td>
</tr>
<tr id="lender4">
<td id="lender4Name"><script>document.getElementById("lender4Name").innerHTML = offers[3].lender_name;</script>
</td>
<td id="lender4Code"><script>document.getElementById("lender4Code").innerHTML = offers[3].lender_code;</script>
</td>
<td id="lender4Display"><script>document.getElementById("lender4Display").innerHTML = offers[3].display;</script>
</td>
<td id="lender4Value"><script>document.getElementById("lender4Value").innerHTML = offers[3].loan_offered;</script>
</td>
<td id="lender4Term"><script>document.getElementById("lender4Term").innerHTML = offers[3].term_offered;</script>
</td>
<td id="lender4AppProb"><script>document.getElementById("lender4AppProb").innerHTML = offers[3].approval_probability;</script>
</td>
<td id="lender4APR"><script>document.getElementById("lender4APR").innerHTML = offers[3].apr;</script>
</td>
<td id="lender4MonthlyRepay"><script>document.getElementById("lender4MonthlyRepay").innerHTML = offers[3].monthly_repayment;</script>
</td>
<td id="lender4TotalRepay"><script>document.getElementById("lender4TotalRepay").innerHTML = offers[3].total_repayment;</script>
</td>
</tr>
</table>

<table>
<tr>
<td>Header A</td>
<td>Header B</td>
<td>Filtered to</td>
</tr>
<tr>
<td>Info A 1</td>
<td>Info B 1</td>
<td>Y</td>
</tr>
<tr>
<td>Info A 2</td>
<td>Info B 2</td>
<td>N</td>
</tr>
<tr>
<td>Info A 3</td>
<td>Info B 3</td>
<td>N</td>
</tr>
<tr>
<td>Info A 4</td>
<td>Info B 4</td>
<td>Y</td>
</tr>
<tr>
<td>Info A 5</td>
<td>Info B 5</td>
<td>N</td>
</tr>
</table>
<table>
<tr>
<td>Header A</td>
<td>Header B</td>
<td>Filtered to</td>
</tr>
<tr>
<td>Info A 1</td>
<td>Info B 1</td>
<td>Y</td>
</tr>
<tr>
<td>Info A 2</td>
<td>Info B 2</td>
<td>N</td>
</tr>
<tr>
<td>Info A 3</td>
<td>Info B 3</td>
<td>Y</td>
</tr>
<tr>
<td>Info A 4</td>
<td>Info B 4</td>
<td>N</td>
</tr>
<tr>
<td>Info A 5</td>
<td>Info B 5</td>
<td>N</td>
</tr>
</table>
<script>
function filterTable(table, cellIndex, filter) {
for (var i = 1, tr; tr = table.rows[i]; i++) { // skip first line
var third_td = tr.cells[cellIndex];
tr.style.display = third_td.innerText === filter ? '' : 'none';
}
}
function filterAllTables(cellIndex, filter) {
var tables = document.getElementsByTagName('table');
if (tables.length > 0) {
for (var i = 0, table; table = tables[i]; i++) {
filterTable(table, cellIndex, filter);
}
}
}
window.addEventListener('load', function () {
filterAllTables(2, 'Y');
});
</script>

I would maybe try css: display: hidden; Also check out this website or research some before posting. https://salesforce.stackexchange.com/questions/122023/hide-html-table-rows-if-outputfield-is-null-or-0 Hope this helps!

without seeing your code is difficult but i know this solution with js:
for (i in document.querySelectorAll('td')) {
if (document.querySelectorAll('td')[i].textContent == 'N' || document.querySelectorAll('td')[i].textContent == 'null' ) {
document.querySelectorAll('td')[i].remove()
}
}
i'm using "remove" only to demonstrate it but you can use style.property...

I went with this option as it worked perfectly, operating in exactly the way that I wanted. Many thanks to René Datenschutz for the solution.
<table>
<tr>
<td>Header A</td>
<td>Header B</td>
<td>Filtered to</td>
</tr>
<tr>
<td>Info A 1</td>
<td>Info B 1</td>
<td>Y</td>
</tr>
<tr>
<td>Info A 2</td>
<td>Info B 2</td>
<td>N</td>
</tr>
<tr>
<td>Info A 3</td>
<td>Info B 3</td>
<td>N</td>
</tr>
<tr>
<td>Info A 4</td>
<td>Info B 4</td>
<td>Y</td>
</tr>
<tr>
<td>Info A 5</td>
<td>Info B 5</td>
<td>N</td>
</tr>
</table>
<table>
<tr>
<td>Header A</td>
<td>Header B</td>
<td>Filtered to</td>
</tr>
<tr>
<td>Info A 1</td>
<td>Info B 1</td>
<td>Y</td>
</tr>
<tr>
<td>Info A 2</td>
<td>Info B 2</td>
<td>N</td>
</tr>
<tr>
<td>Info A 3</td>
<td>Info B 3</td>
<td>Y</td>
</tr>
<tr>
<td>Info A 4</td>
<td>Info B 4</td>
<td>N</td>
</tr>
<tr>
<td>Info A 5</td>
<td>Info B 5</td>
<td>N</td>
</tr>
</table>
<script>
function filterTable(table, cellIndex, filter) {
for (var i = 1, tr; tr = table.rows[i]; i++) { // skip first line
var third_td = tr.cells[cellIndex];
tr.style.display = third_td.innerText === filter ? '' : 'none';
}
}
function filterAllTables(cellIndex, filter) {
var tables = document.getElementsByTagName('table');
if (tables.length > 0) {
for (var i = 0, table; table = tables[i]; i++) {
filterTable(table, cellIndex, filter);
}
}
}
window.addEventListener('load', function () {
filterAllTables(2, 'Y');
});
</script>

How to filter getElement based on CSS property in JS or jQuery

The following code gets all the tr tags in #mytable:
table = document.getElementById("myTable");
trs = table.getElementsByTagName("tr");
But if we want to get only tr tags whose display is not none, what should I do?
Thanks.

Not the best solution, but you can do this...
let tableRows = $("#my-table tr");
tableRows.map((i, obj)=>{
if($(obj).attr('style') != 'display: none;'){
// whatever you want to do here...
console.log(obj);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<table id="my-table">
<tbody>
<tr>
<td>data 1</td>
<td>data 2</td>
</tr>
<tr style="display: none;">
<td>data 3</td>
<td>data 4</td>
</tr>
<tr>
<td>data 5</td>
<td>data 6</td>
</tr>
<tr style="display: none;">
<td>data 7</td>
<td>data 8</td>
</tr>
<tr>
<td>data 9</td>
<td>data 10</td>
</tr>
</tbody>
</table>

You can use the :visible selector which is a jquery extension (https://api.jquery.com/visible-selector/) that allows seelction of elements based on display visibility.
In the following snippet - there are 3 tr's but the middle one is hidden with display:none. The console log targets the visible tr's and logs the number (2);
$(document).ready(function(){
const totalRows = $('#myTable tr');
const visibleRows = totalRows.filter(':visible');
console.log('total rows: '+ totalRows.length); // gives 3
console.log('visible rows: '+ visibleRows.length); // gives 2 - since one tr is hidden
})
.second-row {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="myTable">
<tbody>
<tr class="first-row">
<td>row 1</td>
<td>row 1</td>
<td>row 1</td>
</tr>
<tr class="second-row">
<td>row 2</td>
<td>row 2</td>
<td>row 2</td>
</tr>
<tr class="third-row">
<td>row 3</td>
<td>row 3</td>
<td>row 3</td>
</tr>
</tbody>
</table>

Simple solution with VanillaJS
var elems = document.querySelectorAll('tr');
var noneElems = [];
elems.forEach(function (element) {
if (window.getComputedStyle(element).display == 'none') {
noneElems.push(element);
}
});
console.log( { noneElems } );
<table id="mytable">
<tr>
<td>Block</td>
<td>1</td>
</tr>
<tr style="display:none">
<td>None</td>
<td>1</td>
</tr>
<tr>
<td>Block</td>
<td>2</td>
</tr>
<tr style="display:none">
<td>None</td>
<td>2</td>
</tr>
</table>

How to make table jQuery pagination logic

I am trying to make a jQuery "plugin" to paginate records on a table. According to my own question I tried to make manually.
Also, I am trying to figure out how to display the page numbers correlatively according to the buttonSize.
$(document).ready(function() {
$('#tabla').pagination({
pageSize: 1,
buttonSize: 5,
target: '#paginacion',
template: `<nav class="text-center" aria-label="Page navigation">
<ul class="pagination" id="paginacion">
</ul>
</nav>`
});
});
$.fn.extend({
pagination: function($options) {
$el = this;
buttons = $options.buttonSize || 5;
htmlElement = $($options.template);
target = $(htmlElement).find($options.target);
rows = $($el).find('tbody tr');
initialPage = 1;
pagesAmount = Math.ceil(rows.length / $options.pageSize);
pages = [];
while(rows.length > 0) {
let page = rows.splice(0, $options.pageSize);
pages.push(page);
}
window.pages = pages;
window.currentPage = initialPage;
for(i=0; i<pagesAmount; i++) {
paginationHTML = `<li><a data-page="${i}" href="#">${i+1}</a></li>`;
target.append(paginationHTML);
}
$el.append(htmlElement);
$el.find('tbody').html(pages[window.currentPage-1]);
let scriptCode = `$('${$options.target} a').on('click', function() {` + "\n\t" +
`window.currentPage = $(this).attr('data-page'); ` + "\n\t" +
`$('#${$el.attr('id')} tbody').html(window.pages[window.currentPage]); ` + "\n" +
`$(this).parent().parent().find('li').each(function(item) { $(this).removeClass('active'); })` + "\n" +
`$(this).parent().addClass('active')` + "\n" +
`});` + "\n"
$('body').append($('<script>').html(scriptCode));
}
})
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tabla" class="table table-striped table-bordered">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>Column1: Row 1</td>
<td>Column2: Row 1</td>
<td>Column3: Row 1</td>
<td>Column4: Row 1</td>
</tr>
<tr>
<td>Column1: Row 2</td>
<td>Column2: Row 2</td>
<td>Column3: Row 2</td>
<td>Column4: Row 2</td>
</tr>
<tr>
<td>Column1: Row 3</td>
<td>Column2: Row 3</td>
<td>Column3: Row 3</td>
<td>Column4: Row 3</td>
</tr>
<tr>
<td>Column1: Row 4</td>
<td>Column2: Row 4</td>
<td>Column3: Row 4</td>
<td>Column4: Row 4</td>
</tr>
<tr>
<td>Column1: Row 5</td>
<td>Column2: Row 5</td>
<td>Column3: Row 5</td>
<td>Column4: Row 5</td>
</tr>
<tr>
<td>Column1: Row 6</td>
<td>Column2: Row 6</td>
<td>Column3: Row 6</td>
<td>Column4: Row 6</td>
</tr>
<tr>
<td>Column1: Row 7</td>
<td>Column2: Row 7</td>
<td>Column3: Row 7</td>
<td>Column4: Row 7</td>
</tr>
<tr>
<td>Column1: Row 8</td>
<td>Column2: Row 8</td>
<td>Column3: Row 8</td>
<td>Column4: Row 8</td>
</tr>
</tbody>
</table>
I didn't use ES6 functions since our system is Microsoft based and it won't work on IE.
I am not sure how to adjust the button size so if I have two hundred rows it won't display two hundred pages.
Any suggestions?

Swapping td elements of table using javascript

Is there a simple way of swapping elements of an html table using javascript?
for instance having a table like this:
<table>
<tr>
<td class = "draggable">
<div class = "droppable">Item 1</div>
</td>
</tr>
<tr>
<td class = "draggable">
<div class = "droppable">Item 2</div>
</td>
</tr>
I want to make it available to swap cells.
Thanks!

I've written a little function to swap elements. Pass as arguments the parent (container of swapping elements), and two numbers (index) of the children elements that you want to be swapped.
var rowsParent = document.getElementById('sortRows');
var cellsParent = document.getElementById('sortCells');
swapElements(rowsParent,0,1);
swapElements(cellsParent,2,0);
function swapElements(parent,elemA,elemB){
//a little of validation
if(!parent||parent.constructor.toString().search('HTML')===-1) return;
var children = parent.children;
if(typeof elemA!=='number' || typeof elemB!=='number' || elemA===elemB || !children[elemA] || !children[elemB]) return;
elemB = elemA<elemB ? elemB--:elemB;
var childNumb = children.length - 1;
var a = parent.removeChild(children[elemA]);
var b = parent.removeChild(children[elemB]);
append(elemB,a);
append(elemA,b);
function append(a,b){
childNumb===a ? parent.appendChild(b) : parent.insertBefore(b,children[a]);
}
}
table, td {
border: solid 1px black;
padding: 3px;
margin: 15px;
}
<table>
<tbody id="sortRows">
<tr>
<td>a 1</td>
<td>a 2</td>
<td>a 3</td>
<td>a 4</td>
<td>a 5</td>
</tr>
<tr id="sortCells">
<td>b 1</td>
<td>b 2</td>
<td>b 3</td>
<td>b 4</td>
<td>b 5</td>
</tr>
<tr>
<td>c 1</td>
<td>c 2</td>
<td>c 3</td>
<td>c 4</td>
<td>c 5</td>
</tr>
<tr>
<td>d 1</td>
<td>d 2</td>
<td>d 3</td>
<td>d 4</td>
<td>d 5</td>
</tr>
<tr>
<td>e 1</td>
<td>e 2</td>
<td>e 3</td>
<td>e 4</td>
<td>e 5</td>
</tr>
</tbody>
</table>

You could do it in the same way you swap contents for any variable:
var child1_HTML = $("table tr:nth-child(1)").html();
$("table tr:nth-child(1)").html($("table tr:nth-child(2)").html());
$("table tr:nth-child(2)").html(child1_HTML);

Drag and drop multiple rows from one table to another table

I need to drag and drop table rows by selecting desired rows from on table to another table. First provide option to select needed rows from one table and then all the selected rows need to be drag and drop into some other table.
I have done the sample to drag and drop single row from on table to another. Find the below code:
html:
<div id="table1" class="bitacoratable">
<table>
<thead>
<tr>
<th>ID</th>
<th>ClassName</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Class 1</td>
</tr>
<tr class="childrow">
<td collspan = "2" >
<table class="childgrid">
<tr class="draggable_tr">
<td>1</td>
<td>Student 1</td>
</tr>
<tr class="draggable_tr">
<td>2</td>
<td>Student 2</td>
</tr>
<tr class="draggable_tr">
<td>3</td>
<td>Student 3</td>
</tr>
<tr class="draggable_tr">
<td>4</td>
<td>Student 4</td>
</tr>
<tr class="draggable_tr">
<td>5</td>
<td>Student 5</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>2</td>
<td>Class 2</td>
</tr>
<tr class="childrow">
<td collspan = "2">
<table class="childgrid">
<tr class="draggable_tr">
<td>6</td>
<td>Student 6</td>
</tr>
<tr class="draggable_tr">
<td>7</td>
<td>Student 7</td>
</tr>
<tr class="draggable_tr">
<td>8</td>
<td>Student 8</td>
</tr>
<tr class="draggable_tr">
<td>9</td>
<td>Student 9</td>
</tr>
<tr class="draggable_tr">
<td>10</td>
<td>Student 10</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<div id="table2" class="bitacoratable">
<table>
<thead>
<tr>
<th>ID</th>
<th>ClassName</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Class 1</td>
</tr>
<tr class="childrow">
<td>
<table class="childgrid">
<tr class="draggable_tr">
<td>1</td>
<td>Student 1</td>
</tr>
<tr class="draggable_tr">
<td>2</td>
<td>Student 2</td>
</tr>
<tr class="draggable_tr">
<td>3</td>
<td>Student 3</td>
</tr>
<tr class="draggable_tr">
<td>4</td>
<td>Student 4</td>
</tr>
<tr class="draggable_tr">
<td>5</td>
<td>Student 5</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>2</td>
<td>Class 2</td>
</tr>
<tr class="childrow">
<td>
<table class="childgrid">
<tr class="draggable_tr">
<td>6</td>
<td>Student 6</td>
</tr>
<tr class="draggable_tr">
<td>7</td>
<td>Student 7</td>
</tr>
<tr class="draggable_tr">
<td>8</td>
<td>Student 8</td>
</tr>
<tr class="draggable_tr">
<td>9</td>
<td>Student 9</td>
</tr>
<tr class="draggable_tr">
<td>10</td>
<td>Student 10</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</div>
Script:
$("#table1 .childgrid tr, #table2 .childgrid tr").draggable({
helper: 'clone',
revert: 'invalid',
start: function (event, ui) {
$(this).css('opacity', '.5');
},
stop: function (event, ui) {
$(this).css('opacity', '1');
}
});
$("#table1 .childgrid, #table2 .childgrid").droppable({
drop: function (event, ui) {
$(ui.draggable).appendTo(this);
}
});
$(document).on("click", ".childgrid tr", function () {
$(this).addClass("selectedRow");
});
CSS:
table
{
border-collapse:collapse;
}
table, td, th
{
border:1px solid black;
}
.bitacoratable {
height: 400px;
overflow-y: auto;
width: 220px;
float:left;
}
#table1 {
margin-right: 100px;
}
.selectedRow {
background-color: #E7E7E7;
cursor: move;
}
How to do it for mutilple rows?
Regards,
Karthik.

You could use draggable's helper function. There's a nice implementation here.
Here's how it looks using the above as a guideline for your particular code:
JsFiddle Demonstration:
Explanation of what's going on:
(1) If there's only one selected, then we'll just treat this as a single drag and drop. Because it was not clicked yet (mouse holding down and dragging right away), we'll manually add the selectedRow class to ensure it gets properly removed from its original location.
(selected.length === 0) {
selected = $(this).addClass('selectedRow');
}
(2) Make a temporary container to store all the rows as one unit, as if we were dragging one item.
var container = $('<div/>').attr('id', 'draggingContainer');
container.append(selected.clone().removeClass("selectedRow"));
return container;
(3) You can modify the CSS so that we're always clicking on the items before it shows the move cursor. I already did, but feel free to change it as you like.
(4) Now we append all the table rows in our temporary divider into the .childgrid we chose to drop into and remove all elements that originally were selected.
$("#table1 .childgrid, #table2 .childgrid").droppable({
drop: function (event, ui) {
$(this).append(ui.helper.children());
$(this) is what we chose, and we're appending the elements inside our temporary divider that the helper returns, which are the table rows.
$('.selectedRow').remove();
}
Now to get rid of those table rows that we selected earlier.
});
Let me know if there are any bugs and I'll try my best to sort them out. It works on my end. Since you can highlight the text in the table rows, there could possibly be some issues if you drag and drop too fast and you're highlighting text rather than selecting the row itself.

Categories

Resources