I've got 2 tables that I'm trying to shift rows between in HTML using JavaScript, but I'm not having much luck at the moment. I've tried plenty of solutions from here but none of them seem to be working for me at the moment!
Currently my HTML code is as per below
.container {
overflow: hidden
}
.tab {
float: left
}
.tab-btn {
margin: 50px
}
button {
display: block;
margin-bottom: 20px
}
<div class="container-fluid">
<div class="card-deck">
<div class="card">
<div class="card-body">
<h5 class="card-title">Manage Schools</h5>
<div class="container">
<div class="tab">
<table class="table table-sm table-hover" id="table1">
<tr>
<th>School ID</th>
<th>School Name</th>
<th>Select</th>
</tr>
<tr>
<td>1</td>
<td>School A</td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>2</td>
<td>School B</td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>3</td>
<td>School C</td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>4</td>
<td>School D</td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>5</td>
<td>School E</td>
<td>
<input type="checkbox" "></td>
</tr>
<tr>
<td>6</td>
<td>School F</td>
<td><input type="checkbox "></td>
</tr>
</table>
</div>
<div class="tab tab-btn ">
<button>Add</button>
<button>Remove</button>
</div>
<div class="tab ">
<table class="table table-sm table-hover " id="table2 ">
<tr>
<th>School ID</th>
<th>School Name</th>
<th>Select</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
Ideally, once a row has been shifted from table1 to the table2, it can then be removed from the table2 using the remove button. Also being able to select multiple rows and moving them at the same time would be a huge advantage.
Any and all help with the JavaScript would be very much appreciated!
Related
I am making a cart for my web app where user can select the item that they want in the product table by checking the checkbox, then the checkbox will show the selected item beside the table to show the user what he have selected. Assume the product list have 500+ products.
I have wrote a simple jQuery that manage to insert the selected items into "selecteditemlist", but even after I uncheck the checkbox, the product code still stay in the selected list.
Thanks in advance.
$('input[type="checkbox"]').change(function() {
var itemcode = $(this).closest("tr").find("td:nth-child(2)").text();
$("#selecteditemlist").append(itemcode);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="col-10">
<table>
<tr>
<th>No</th>
<th>Item Code</th>
<th>Description</th>
<th>Price</th>
<th>Selection</th>
</tr>
<tr>
<td>1</td>
<td>ABC123</td>
<td>Item1</td>
<td>$1</td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>2</td>
<td>BCD456</td>
<td>Item2</td>
<td>$1</td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>3</td>
<td>NBV345</td>
<td>Item3</td>
<td>$1</td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>4</td>
<td>POI345</td>
<td>Item4</td>
<td>$1</td>
<td><input type="checkbox"></td>
</tr>
</table>
</div>
<div class="col-2">
<div class="row sticky-top">
<h5><u>Selected Item</u></h5>
<div class="border border-danger" id="selecteditemlist">
</div>
</div>
</div>
</div>
By JavaScript you can achieve by doing like in below snippet :
Here main thing to notice is document.getElementById("selecteditemlist").textContent = ""; , which is important as on each subsequent clicks on checkbox leads to more and more addition to present data . By using this you can achieve that only 1 time data is added
var filterCheck = document.getElementsByClassName("prdCheck");
for (let i = 0; i < filterCheck.length; i++) { //looped through all wishlist classes so all can be run with single code
filterCheck[i].addEventListener("click", applyFilter);
}
function applyFilter() {
var i;
var filterLabel = document.getElementsByClassName("prdName");
var filterCheck = document.getElementsByClassName("prdCheck");
document.getElementById("selecteditemlist").textContent = "";
for (i = 0; i < filterCheck.length; i++) {
if (filterCheck[i].checked == true) {
var div = document.createElement("SPAN")
var txt = filterLabel[i].textContent
var text = document.createTextNode(txt)
div.appendChild(text)
document.getElementById("selecteditemlist").appendChild(div);
}
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="col-10">
<table>
<tr>
<th>No</th>
<th>Item Code</th>
<th>Description</th>
<th>Price</th>
<th>Selection</th>
</tr>
<tr>
<td>1</td>
<td class="prdName">ABC123</td>
<td>Item1</td>
<td>$1</td>
<td><input type="checkbox" class="prdCheck"></td>
</tr>
<tr>
<td>2</td>
<td class="prdName">BCD456</td>
<td>Item2</td>
<td>$1</td>
<td><input type="checkbox" class="prdCheck"></td>
</tr>
<tr>
<td>3</td>
<td class="prdName">NBV345</td>
<td>Item3</td>
<td>$1</td>
<td><input type="checkbox" class="prdCheck"></td>
</tr>
<tr>
<td>4</td>
<td class="prdName">POI345</td>
<td>Item4</td>
<td>$1</td>
<td><input type="checkbox" class="prdCheck"></td>
</tr>
</table>
</div>
<div class="col-2">
<div class="row sticky-top">
<h5><u>Selected Item</u></h5>
<div class="border border-danger" id="selecteditemlist">
</div>
</div>
</div>
</div>
I have given data-table and trying fixed header while scroll down.
below datable displayed.
<table class="temp1 table table-striped dataTable mt-2 table-bordered" cellspacing="0" cellpadding="0" style="margin-bottom: 0px; margin-top: 0px;" role="grid"
aria-describedby="user-list-page-info" id="user-list-table">
<thead id="taablehead">
<tr class="ligth" style="margin-left: 2px;">
<th>id</th>
<th>name</th>
<th>class</th>
<th> </th>
<th> </th>
<th> </th>
</tr>
</thead>
<tbody>
<tr class="ligth">
<tr class="table-info" id="row2" style="background-color: #dadbde;">
<td><input type="checkbox" class="checkbox-input"></td>
<td>10001</td>
<td>karan</td>
<td>A</td>
<td></td>
<td></td>
</tr>
<tr class="table-info" id="row3" style="background-color: #dadbde;">
<td><input type="checkbox" class="checkbox-input"></td>
<td>10002</td>
<td>john</td>
<td>B</td>
<td></td>
<td></td>
</tr>
<tr class="table-info" id="row4" style="background-color: #dadbde;">
<td><input type="checkbox" class="checkbox-input"></td>
<td>10003</td>
<td>rahul</td>
<td>C</td>
<td></td>
<td></td>
</tr>
</tr>
</tbody>
i am trying to fix header on scroll down using below js but didn't work.
$(document).ready(function() {
var table = $('.temp1').DataTable({
fixedHeader: true,
scrollX: true
});
} );
but given error like Uncaught TypeError: Cannot set property '_DT_CellIndex' of undefined i have tried with datatbale js, but didn't work.
Your issue is caused by having a nested <tr>
<tbody>
<tr class='ligth'>
<tr>
Removing that (and not fixing the other typos) removes the error:
$(document).ready(function() {
var table = $('.temp1').DataTable({
fixedHeader: true,
scrollX: true
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/css/jquery.dataTables.min.css" rel="stylesheet" >
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/js/jquery.dataTables.min.js"></script>
<table class="temp1 table table-striped dataTable mt-2 table-bordered" cellspacing="0" cellpadding="0" style="margin-bottom: 0px; margin-top: 0px;" role="grid"
aria-describedby="user-list-page-info" id="user-list-table">
<thead id="taablehead">
<tr class="ligth" style="margin-left: 2px;">
<th> </th>
<th>id</th>
<th>name</th>
<th>class</th>
</tr>
</thead>
<tbody>
<tr class="table-info" id="row2" style="background-color: #dadbde;">
<td><input type="checkbox" class="checkbox-input"></td>
<td</td>
<td</td>
<td>10001</td>
<td>karan</td>
<td>A</td>
</tr>
<tr class="table-info" id="row2" style="background-color: #dadbde;">
<td><input type="checkbox" class="checkbox-input"></td>
<td</td>
<td</td>
<td>10002</td>
<td>john</td>
<td>B</td>
</tr>
<tr class="table-info" id="row2" style="background-color: #dadbde;">
<td><input type="checkbox" class="checkbox-input"></td>
<td</td>
<td</td>
<td>10003</td>
<td>rahul</td>
<td>C</td>
</tr>
</tbody>
</table>
document.getElementById("top").onscroll = function()
{
var div = document.getElementById("top").scrollTop;
var div1 = document.getElementById("top1").scrollTop;
var div2top = document.getElementById("d3").scrollTop;
var div2left = document.getElementById("d3").scrollLeft;
if(div>0){
c = document.getElementById("d3");
c.scrollTo(div2left, div);
}
var offsetHeight = 0;
var scrollHeight = 0;
}
.table-wrapper {
display:flex;
height:100px;
overflow-y:scroll;
box-sizing:border-box;
}
.innerdiv{
//height:200px;
height:100px;
display:flex;
}
.d{
//float:left;
// position:relative;
}
.d3{
position:absolute;
width:100px;
height:100px;
left:290px;
overflow-x:overlay;
overflow-y:none;
}
#d3::-webkit-scrollbar {
width: 0px;
height:5px;
background-color: #F5F5F5;
}
.d4{
margin-left:100px;
}
<div onscroll="scroll();" class="table-wrapper" id="top">
<div class="innerdiv" id="top1">
<div class="d d1">
<table>
<thead>
<tr>
<th>Heading1</th>
<th>Heading2</th>
</tr>
</thead>
<tbody>
<tr>
<td>cont1</td>
<td>cont2</td>
</tr>
<tr>
<td>cont1</td>
<td>cont2</td>
</tr>
<tr>
<td>cont1</td>
<td>cont2</td>
</tr>
<tr>
<td>cont1</td>
<td>cont2</td>
</tr>
<tr>
<td>cont1</td>
<td>cont2</td>
</tr>
<tr>
<td>cont1</td>
<td>cont2</td>
</tr>
</tbody>
</table>
</div>
<div class="d d2">
<table>
<thead>
<tr>
<th>Heading3</th>
<th>Heading4</th>
</tr>
</thead>
<tbody>
<tr>
<td>cont3</td>
<td>cont4</td>
</tr>
<tr>
<td>cont3</td>
<td>cont4</td>
</tr>
<tr>
<td>cont3</td>
<td>cont4</td>
</tr>
<tr>
<td>cont3</td>
<td>cont4</td>
</tr>
<tr>
<td>cont3</td>
<td>cont4</td>
</tr>
<tr>
<td>cont3</td>
<td>cont4</td>
</tr>
</tbody>
</table>
</div>
<div class="d d3" id="d3">
<table>
<thead>
<tr>
<th>Heading5</th>
<th>Heading6</th>
</tr>
</thead>
<tbody>
<tr>
<td>cont5</td>
<td>cont6</td>
</tr>
<tr>
<td>cont5</td>
<td>cont6</td>
</tr>
<tr>
<td>cont5</td>
<td>cont6</td>
</tr>
<tr>
<td>cont5</td>
<td>cont6</td>
</tr>
<tr>
<td>cont5</td>
<td>cont6</td>
</tr>
<tr>
<td>cont5</td>
<td>cont6</td>
</tr>
</tbody>
</table>
</div>
<div class="d d4">
<table>
<thead>
<tr>
<th>Heading7</th>
<th>Heading8</th>
</tr>
</thead>
<tbody>
<tr>
<td>cont1</td>
<td>cont2</td>
</tr>
<tr>
<td>cont1</td>
<td>cont2</td>
</tr>
<tr>
<td>cont1</td>
<td>cont2</td>
</tr>
<tr>
<td>cont1</td>
<td>cont2</td>
</tr>
<tr>
<td>cont1</td>
<td>cont2</td>
</tr>
<tr>
<td>cont1</td>
<td>cont2</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
My original requirement, http://jsfiddle.net/f7ht9gow/9/. But, I couldn't stop horizontal scrollbar div moving vertically. So, I tried doing it with pure js using some article though something went wrong with Horizontal scrolling and it is not moving. Can anybody help me? Here is the fiddle for vertical and horizontal scroll bars.
Than you all!
I check fiddle that you share, If I understand you correctly you want an horizontal scroll in the middle
just change this part of your CSS code overflow-x:scroll;
like this
.d3{
position:absolute;
width : 100px;
height : 100px;
left : 290px;
overflow-x:scroll;
overflow-y:none;
}
On the images you can find page example. Look at the difference between left and right table. Left field is previous iteration, right - current iteration. I need:
(On previous iteration field)
Set background color on the position of new row
Create new row
After that move new row to the right field with JQuery animation.
First image:
Second image:
<div class="control">
<div class="prev_iter">
<div class="truthTable">
<table class="TT">
<tbody>
<tr>
<th class="bit" style="border: none"> </th>
<th class="bit" style="background-color: #87D37C">x<sub>2</sub></th>
<th class="bit" style="background-color: #87D37C">x<sub>1</sub></th>
<th class="bit" style="background-color: #87D37C">x<sub>0</sub></th>
</tr>
</tbody>
</table>
</div>
</div>
<div class="current_iter">
<div class="truthTable">
<table class="TT">
<tbody>
<tr>
<th class="bit" style="border: none"> </th>
<th class="bit" style="background-color: #87D37C">x<sub>2</sub></th>
<th class="bit" style="background-color: #87D37C">x<sub>1</sub></th>
<th class="bit" style="background-color: #87D37C">x<sub>0</sub></th>
</tr>
<tr>
<td class="bit" style="border: none">0: </td>
<td class="bit">0</td>
<td class="bit">0</td>
<td class="bit">0</td>
</tr>
</tbody>
</table>
</div>
</div>
<br>
<div class="controlButtons">
<input id="back" name="back" onclick="controllerSwitchSteps(this.id);" type="button" value="<Previous">
Step <span id="stepNumber">2</span> from <span id="totalSteps">13</span>
<input id="next" name="next" onclick="controllerSwitchSteps(this.id);" type="button" value="Next>">
</div>
</div>
I'd recommend using a jQuery solution myself, you'll have to put in some work yourself and work on the animations yourself, but in order to take the last row of one table and put it on another, you should be able to do something like this:
$("tr").on("click", function() {
$(this).appendTo("#clonedTable");
});
td {
border: 1px solid gray;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p> Click on a row to move it to the other table!</p>
<table id="originalTable">
<tr>
<td>Data 1 </td>
<td>Data 2 </td>
<td>Data 3 </td>
</tr>
<tr>
<td>Data 4 </td>
<td>Data 5 </td>
<td>Data 6 </td>
</tr>
</table>
<hr />
<table id="clonedTable">
<tr>
<td>Data 7</td>
<td>Data 8</td>
<td>Data 9</td>
</tr>
</table>
I need to stress that this is about HORIZONTAL scrolling with THE FIRST COLUMN FIXED because most answers are giving me solutions to vertical scrolling.
Is it possible using pure css to have a table that scrolls horizontally but the first header and first column are fixed with the rest of the content scrollable?
For example if I had this table:
<table>
<thead>
<tr>
<th class="head1">Head 1</th>
<th class="head2">Head 2</th>
<th class="head2">Head 3</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col1">Col 1</td>
<td class="col2">Col 2</td>
<td class="col3">Col 3</td>
</tr>
</tbody>
</table>
The head1 and col1 would always be shown with the other columns scrollable.
This is what I was after. The example uses 2 tables that are floated left with an overflow applied to a div that wraps the right most table. Both tables are contained in a div with a fixed width.
<div class="table-container">
<div class="left">
<table>
...
</table>
</div>
<div class="right">
<table>
...
</table>
</div>
</div>
.table-container {
position: relative;
width: 600px;
height: 100%;
display: inline-block;
}
table {
float: left;
}
.right {
overflow: auto;
}
<table >
<tr>
<th>abc</th>
<th>xyz</th>
</tr>
<tr>
<td colspan="2">
<div style="height:50px; overflow:scroll;">
<table>
<tr>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
Please check it. It may be work.