I am trying to implement drag and drop rows with in same table using html5, but I would like to restrict the drop area to few rows instead of whole table.
Code :
<table id="visibletable" class="dra-table">
<thead>
<tr>
<th>Visible</th>
<th>Width</th>
<th>Color</th>
</tr>
</thead>
<tbody ondrop="dropPart(event)" ondragover="allowDropPart(event)">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr id="partdesc1" draggable="true" ondragstart="dragPart(event)">
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr id="partdesc2" draggable="true" ondragstart="dragPart(event)">
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr id="partdesc3" draggable="true" ondragstart="dragPart(event)">
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr id="partdesc4" draggable="true" ondragstart="dragPart(event)">
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr id="partdesc5" draggable="true" ondragstart="dragPart(event)">
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
First 3 rows in the table are not be allowed to drag and draggable rows should not be allowed to drop with in first 3 rows.
Currently I am have applied ondrop="dropPart(event)" at the tbody tag so I am able to drop rows any where in the table, Is there a way to restrict drop area?
You Can Refere Below Link For Native HTML5 Drag and Drop
http://www.redips.net/javascript/drag-and-drop-table-row/
http://www.html5rocks.com/en/tutorials/dnd/basics/
Related
I'm reading data into an html table from a database and would like to alternate the row color when the value in the first column changes -- nothing fancy just alternate between two colors to help visually group the data. The issue I'm having is the groups of data is dynamic, and I don't know how to change the colors based on dynamic data. I'm open to use CSS, jquery, javascript -- whatever tricks you have that would work. I've created a very simple jsFiddle that has all rows the same color for you to play with.
UPDATED EXPLANATION:
When I say I want the row colors to alternate based on the value of a column changing, what I mean is, when looking at my fiddle example, the table rows start off aliceblue, and the value in the first column is 1. When that value changes to 2 I want the table rows to change colors to lightgreen. When the Key column value then changes to 3 I want the colors to switch back to aliceblue. When the key column value changes to 4 I want it to flip back to light green. Hope this helps to clarify...
As always, any help you can give would be greatly appreciated!!
tbody tr {
background: aliceblue;
}
.altColor {
background: lightgreen;
}
<div id="banner-message">
<table>
<thead>
<tr>
<th>Key</th>
<th>val</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>1</td>
</tr>
<tr>
<td>3</td>
<td>1</td>
</tr>
<tr>
<td>4</td>
<td>1</td>
</tr>
<tr>
<td>4</td>
<td>1</td>
</tr>
<tr>
<td>5</td>
<td>1</td>
</tr>
<tr>
<td>5</td>
<td>1</td>
</tr>
<tr>
<td>5</td>
<td>1</td>
</tr>
</tbody>
</table>
</div>
I have added some javascript logic to make it work. I have added two scenarios. One if class should be based on the Odd/Even values and another is if class should be based on the value change.
See the Snippet below:
$(document).ready(function(){
$("#banner-message tbody tr").each(function() {
if(parseInt($(this).find("td").first().html()) % 2 == 0){
$(this).addClass("altColor");
}
});
let prevValue = parseInt($("#banner-message2 tbody tr").first().find("td").first().html());
let currentClass = '';
$("#banner-message2 tbody tr").each(function() {
if(prevValue != parseInt($(this).find("td").first().html())){
(currentClass=='')?currentClass = 'altColor':currentClass='';
}
$(this).addClass(currentClass);
prevValue = parseInt($(this).find("td").first().html());
});
});
tbody tr {
background: aliceblue;
}
.altColor {
background: lightgreen;
}
div {
display:inline-block;
padding:10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="banner-message">
Based on the Even/Odd values
<table>
<thead>
<tr>
<th>Key</th>
<th>val</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>1</td>
</tr>
<tr>
<td>3</td>
<td>1</td>
</tr>
<tr>
<td>4</td>
<td>1</td>
</tr>
<tr>
<td>4</td>
<td>1</td>
</tr>
<tr>
<td>5</td>
<td>1</td>
</tr>
<tr>
<td>5</td>
<td>1</td>
</tr>
<tr>
<td>5</td>
<td>1</td>
</tr>
</tbody>
</table>
</div>
<div id="banner-message2">
Based on the value change
<table>
<thead>
<tr>
<th>Key</th>
<th>val</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>4</td>
<td>1</td>
</tr>
<tr>
<td>4</td>
<td>1</td>
</tr>
<tr>
<td>4</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>1</td>
</tr>
<tr>
<td>3</td>
<td>1</td>
</tr>
<tr>
<td>3</td>
<td>1</td>
</tr>
<tr>
<td>5</td>
<td>1</td>
</tr>
<tr>
<td>5</td>
<td>1</td>
</tr>
<tr>
<td>5</td>
<td>1</td>
</tr>
</tbody>
</table>
</div>
I hope this will help you :)
You can alternate color on a table with the :nth-child selector and the odd and even rules.
More can be found there https://www.w3.org/Style/Examples/007/evenodd.en.html
Try something like this:
tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}
If you want to get the whole string in column use
$(document).ready(function(){
//let prevValue = parseInt($("#banner-message2 tbody tr").first().find("td").first().html());
let prevValue = $("#banner-message2 tbody tr").find("td:first").html();
console.log(prevValue);
let currentClass = '';
$("#banner-message2 tbody tr").each(function() {
if(prevValue != $(this).find("td:first").html()){
(currentClass=='')?currentClass = 'altColor':currentClass='';
}
$(this).addClass(currentClass);
prevValue = $(this).find("td:first").html();
});
});
I am trying to change css style for the first visible row on a table using jQuery and css rules.
When i change the offset i would like to show first visible table TBODY row in red using my css rule.
this is my code example :
$(document).ready(function(){
$('input').on('change',function(){
$.each($("tbody>tr"), function(index, element) {
offset = $('input').val();
if(index < offset){
$("#row-"+index).removeClass('is-visible');
}else{
$("#row-"+index).addClass('is-visible');
}
});
})
});
table tbody>tr{
display:none;
}
table tbody>tr.is-visible{
display:block;
}
table tr.is-visible:first-child{
background-color: #f00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
offset : <input type="number" min="0" max="100">
<hr>
<table class="table">
<thead>
<tr>
<th>TH 1</th>
<th>TH 2</th>
<th>TH 3</th>
</tr>
</thead>
<tbody>
<tr class="is-visible" id="row-0">
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
<tr class="is-visible" id="row-1">
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr class="is-visible" id="row-2">
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr class="is-visible" id="row-3">
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
<tr class="is-visible" id="row-4">
<td>4</td>
<td>4</td>
<td>4</td>
</tr>
<tr class="is-visible" id="row-5">
<td>5</td>
<td>5</td>
<td>5</td>
</tr>
</tbody>
</table>
Thanks for your help.
Through Pure css it's not possible:- Targeting first visible element with pure CSS
But through jQuery you can do like below:-
$(document).ready(function(){
$('input').on('change',function(){
$.each($("tbody>tr"), function(index, element) {
offset = $('input').val();
if(index < offset){
$("#row-"+index).removeClass('is-visible');
}else{
$("#row-"+index).addClass('is-visible');
}
});
$(".is-visible:first").css({"background-color":"red"});
$(".is-visible").not(":first").css({"background-color":"#ffffff"});
})
});
table tbody>tr{
display:none;
}
table tbody>tr.is-visible{
display:block;
}
table tr.is-visible:first-child{
background-color: #f00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
offset : <input type="number" min="0" max="100">
<hr>
<table class="table">
<thead>
<tr>
<th>TH 1</th>
<th>TH 2</th>
<th>TH 3</th>
</tr>
</thead>
<tbody>
<tr class="is-visible" id="row-0">
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
<tr class="is-visible" id="row-1">
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr class="is-visible" id="row-2">
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr class="is-visible" id="row-3">
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
<tr class="is-visible" id="row-4">
<td>4</td>
<td>4</td>
<td>4</td>
</tr>
<tr class="is-visible" id="row-5">
<td>5</td>
<td>5</td>
<td>5</td>
</tr>
</tbody>
</table>
You have to do using jQuery. Try below code.
$(document).ready(function(){
$('input').on('change',function(){
$.each($("tbody>tr"), function(index, element) {
offset = $('input').val();
if(index < offset){
$("#row-"+index).removeClass('is-visible');
}else{
$("#row-"+index).addClass('is-visible');
}
$(".is-visible").css({"background-color":"white"});
$("#row-"+offset).css({"background-color":"red"});
});
})
});
table tbody>tr{
display:none;
}
table tbody>tr.is-visible{
display:block;
}
table tr.is-visible:first-child{
background-color: #f00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
offset : <input type="number" min="0" max="100">
<hr>
<table class="table">
<thead>
<tr>
<th>TH 1</th>
<th>TH 2</th>
<th>TH 3</th>
</tr>
</thead>
<tbody>
<tr class="is-visible" id="row-0">
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
<tr class="is-visible" id="row-1">
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr class="is-visible" id="row-2">
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr class="is-visible" id="row-3">
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
<tr class="is-visible" id="row-4">
<td>4</td>
<td>4</td>
<td>4</td>
</tr>
<tr class="is-visible" id="row-5">
<td>5</td>
<td>5</td>
<td>5</td>
</tr>
</tbody>
</table>
You can see: https://jsfiddle.net/dkhny7t9/3/
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I'm starting to develop an HTML/Javascript/jquery application.
I have an HTML table with 100 rows and 5 columns.
I can display only 10 rows of this table on my device, so I need to scroll up and down on this table to display all values.
In order to do this, I need to enable scrolling only on the middle column. With the scroll event on the middle column, the table should scroll normally.
With the scroll event on other column, the table shouldn't scroll.
Furthermore, the table has a header and a footer. These elements must be fixed on table scroll.
Can you post some idea or piece of code to do that?
Simply toggle overflow-y values auto / hidden when a desired column is hovered
var $container = $("#container");
$container.find("td").hover(function(){
$container.toggleClass("oyScroll", $(this).index() == 1);
});
#container {
height:170px;
overflow:hidden;
}
#container.oyScroll {
overflow-y: auto;
}
table {
width:100%;
}
table td {
background:#eee;
padding: 12px 24px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
</div>
The example is as follows:
see : DEMO
or:
<body>
<select>
<option>1</option>
<option>2</option>
<option>......</option>
<option>21</option>
</select>
<div style="overflow:auto;height:50%;width:50%">
<table border="1">
<tr>
<th>Rowno</th>
<th>Savings</th>
<th>Title</th>
</tr>
<tr>
<td>1</td>
<td>$100</td>
<th>t1</th>
</tr>
<tr>
<td>2</td>
<td>$300</td>
<th>t2</th>
</tr>
<tr>
<td>3</td>
<td>$400</td>
<th>t3</th>
</tr>
</tr>
</tr>
<tr>
<td>4</td>
<td>$200</td>
<th>t5</th>
</tr>
<tr>
<td>5</td>
<td>$200</td>
<th>t5</th>
</tr>
<tr>
<td>6</td>
<td>$200</td>
<th>t5</th>
</tr>
<tr>
<td>7</td>
<td>$200</td>
<th>t5</th>
</tr>
<tr>
<td>8</td>
<td>$200</td>
<th>t5</th>
</tr>
<tr>
<td>21</td>
<td>$200</td>
<th>t5</th>
</tr>
</table>
</div>
</body>
As the example in the jsfiddle above,assuming that the row 21st. is invisible in the table unless you scroll the scrollbar to the bottom,so if I want to move the the row 21st. of the table to be visible in the table when selecting a rowno in the select options by using js or jquery,could you please tell me how to write this js? thanks.
If you are using Jquery. You can use the hide function. Your would require a class.
$('.trhideclass1').hide();
<tr class="trhideclass1">
<td>......</td>
</tr>
I have two tables with different heights next to each other. I would like the tables to slideToggle independently.
When selecting the table headers, currently nothing is happening...
The fiddle: http://jsfiddle.net/wod51fvL/
Any comments welcomed!
The HTML:
<h1>Test Heading 1</h1>
<table>
<tr>
<td valign="top">
<table class="tableSort">
<thead>
<tr>
<th id="clientClick" colspan="3" style="cursor:pointer;">Client</th>
</tr>
</thead>
<div id="clientResult">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</div>
</table>
</td>
<td valign="top">
<table class="tableSort">
<thead>
<tr>
<th id="employeeClick" colspan="3" style="cursor:pointer;">Employee</th>
</tr>
</thead>
<div id="employeeResult">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</div>
</table>
</td>
</tr>
</table>
The JS:
var j$ = jQuery.noConflict();
j$(document).ready(function () {
j$("#clientClick").click(function () {
j$("#clientResult").slideToggle(600);
});
});
j$(document).ready(function () {
j$("#employeeClick").click(function () {
j$("#employeeResult").slideToggle(600);
});
});
A very bad html and js
You can't wrap tr tags into div.
You don't need to call document.ready function twice
Here is a quick jsfiddle to fit your example. It needs to be improved(no time sorry).
http://jsfiddle.net/wod51fvL/7/
$(document).ready(function () {
$("#clientClick").click(function () {
$("#clientResult").slideToggle(600);
});
$("#employeeClick").click(function () {
$("#employeeResult").slideToggle(600);
});
});