I have the following code till now:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js">
</script>
<title>
Drag and Drop
</title>
<style>
#timetable {
float: left;
border-collapse: collapse;
border: 1px solid black;
}
#timetable td{
width: 150px;
height: 75px;
border: 1px solid black;
}
td div{
width: 150px;
height: 75px;
background-color: #ccc;
}
.drag{
width:150px;
height:75px;
border :2px solid red;
}
.list{
float: right;
border: 1px solid black;
width: 150px;
height: 425px;
overflow: scroll;
}
</style>
<script>
$(function(){
$(".drag").draggable({
revert: "invalid",
cursor: "crossshair"
});
$(".drop").droppable({
accept: ".drag",
hoverClass:"ui-state-highlight",
tolerance:"pointer",
drop: function(event,ui){
console.log("drop");
$(ui.draggable).detach().css({top:0,left:0}).appendTo($(this));
}
});
$(".list").droppable({
accept: (".drag"),
hoverClass:"ui-state-highlight"
});
});
</script>
<table id="timetable">
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
</tr>
<tr>
<td><div class="drop"></div></td>
<td><div class="drop"></div></td>
<td><div class="drop"></div></td>
<td><div class="drop"></div></td>
<td><div class="drop"></div></td>
</tr>
<tr>
<td><div class="drop"></div></td>
<td><div class="drop"></div></td>
<td><div class="drop"></div></td>
<td><div class="drop"></div></td>
<td><div class="drop"></div></td>
</tr>
<tr>
<td><div class="drop"></div></td>
<td><div class="drop"></div></td>
<td><div class="drop"></div></td>
<td><div class="drop"></div></td>
<td><div class="drop"></div></td>
</tr>
<tr>
<td><div class="drop"></div></td>
<td><div class="drop"></div></td>
<td><div class="drop"></div></td>
<td><div class="drop"></div></td>
<td><div class="drop"></div></td>
</tr>
<tr>
<td><div class="drop"></div></td>
<td><div class="drop"></div></td>
<td><div class="drop"></div></td>
<td><div class="drop"></div></td>
<td><div class="drop"></div></td>
</tr>
</table>
<div class="list">
Drag from below:
<div class="drag"></div>
<div class="drag"></div>
<div class="drag"></div>
<div class="drag"></div>
<div class="drag"></div>
<div class="drag"></div>
</div>
I want items to be dropped back and arrange themselves to the scrollable column area. Items gets dropped back now but doesn't arrange itself(and also changes colour :( ).
Also I want some idea as how to uniquely identify the cell in the table where an item is being dropped as I am going to have a table made in my database which stores what was dropped in a particular cell.
Any help would be grateful.
Related
For a project I need to make a website for a teacher and talk about it. I decided to build a attendance page and here is my code down below:
<html>
<style>
table.GeneratedTable {
width: 100%;
background-color: #0055ff;
border-collapse: collapse;
border-width: 2px;
border-color: #89cff0;
border-style: solid;
color: #000000;
}`your text`
table.GeneratedTable td,
table.GeneratedTable th {
border-width: 2px;
border-color: ;
border-style: solid;
padding: 3px;
}
table.GeneratedTable thead {
background-color: #89cff0;
}
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
</style>
Home
Model Un
Ap Gov
IB History
<head>
<style>
h1 {
border-top: 5px solid red;
}
h2 {
border-top: 4px dotted blue;
}
div {
border-top: double;
}
</style>
</head>
<body>
<h1>Model UN                                                   Present        Absent</h1>
<table class="GeneratedTable" id="GeneratedTable">
<td><div contenteditable>Rayan Khattabi</div></td>
<td><div contenteditable>Yes</div></td>
<td><div contenteditable>No</div></td>
<tr>
<td><div contenteditable>student</div></td>
<td><div contenteditable>Yes</div></td>
<td><div contenteditable>No</div></td>
</tr>
<tr>
<td><div contenteditable>student</div></td>
<td><div contenteditable>Yes</div></td>
<td><div contenteditable>no</div></td>
</tr>
<tr>
<td><div contenteditable>student</div></td>
<td><div contenteditable>Yes</div></td>
<td><div contenteditable>no</div></td>
</tr>
<tr>
<td><div contenteditable>student</div></td>
<td><div contenteditable>Yes</div></td>
<td><div contenteditable>no</div></td>
</tr>
<tr>
<td><div contenteditable>student</div></td>
<td><div contenteditable>Yes</div></td>
<td><div contenteditable>no</div></td>
</tr>
<tr>
<td><div contenteditable>student</div></td>
<td><div contenteditable>Yes</div></td>
<td><div contenteditable>no</div></td>
</tr>
<tr>
<td><div contenteditable>student</div></td>
<td><div contenteditable>Yes</div></td>
<td><div contenteditable>no</div></td>
</tr>
<tr>
<td><div contenteditable>student</div></td>
<td><div contenteditable>Yes</div></td>
<td><div contenteditable>no</div></td>
</tr>
<tr>
<td><div contenteditable>student</div></td>
<td><div contenteditable>Yes</div></td>
<td><div contenteditable>no</div></td>
</tr>
<tr>
<td><div contenteditable>student</div></td>
<td><div contenteditable>Yes</div></td>
<td><div contenteditable>no</div></td>
</tr>
</table>
<button type="button" onclick="myFunction()">Add new Row</button>
<script>
function myFunction() {
var table = document.getElementById("GeneratedTable");
var row = table.insertRow(0);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
cell1.innerHTML = "Student";
cell2.innerHTML = "Yes";
cell3.innerHTML= "No"
}
</script>
</body>
</html>
However, the content editable data doesn't save and I was wondering how could I make it save?
I tried to do some research but couldn't really find anything. I tried to do contenteditable=true, but it didn't work.
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 4 years ago.
Improve this question
Here's what I have right now is https://codepen.io/andornagy/pen/gaGBZz
I want to add a collapse transition to the data table.
Please visit the link to see the whole example
Please Help!
$(document).ready(function() {
$('[data-toggle="toggle"]').change(function(){
$(this).parents().next('.hide').toggle();
});
});
table {
width: 750px;
border-collapse: collapse;
margin:50px auto;
}
th {
background: #3498db;
color: white;
font-weight: bold;
}
td, th {
padding: 10px;
border: 1px solid #ccc;
text-align: left;
font-size: 18px;
}
.labels tr td {
background-color: #2cc16a;
font-weight: bold;
color: #fff;
}
.label tr td label {
display: block;
}
[data-toggle="toggle"] {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Regian</th>
<th>Q1 2010</th>
<th>Q2 2010</th>
<th>Q3 2010</th>
<th>Q4 2010</th>
</tr>
</thead>
<tbody>
<tbody class="labels">
<tr>
<td colspan="5">
<label for="accounting">Accounting</label>
<input type="checkbox" name="accounting" id="accounting" data-toggle="toggle">
</td>
</tr>
</tbody>
<tbody class="hide">
<tr>
<td>Australia</td>
<td>$7,685.00</td>
<td>$3,544.00</td>
<td>$5,834.00</td>
<td>$10,583.00</td>
</tr>
<tr>
<td>Central America</td>
<td>$7,685.00</td>
<td>$3,544.00</td>
<td>$5,834.00</td>
<td>$10,583.00</td>
</tr>
</tbody>
<tbody class="labels">
<tr>
<td colspan="5">
<label for="management">Management</label>
<input type="checkbox" name="management" id="management" data-toggle="toggle">
</td>
</tr>
</tbody>
<tbody class="hide">
<tr>
<td>Australia</td>
<td>$7,685.00</td>
<td>$3,544.00</td>
<td>$5,834.00</td>
<td>$10,583.00</td>
</tr>
<tr>
<td>Central America</td>
<td>$7,685.00</td>
<td>$3,544.00</td>
<td>$5,834.00</td>
<td>$10,583.00</td>
</tr>
<tr>
<td>Europe</td>
<td>$7,685.00</td>
<td>$3,544.00</td>
<td>$5,834.00</td>
<td>$10,583.00</td>
</tr>
<tr>
<td>Middle East</td>
<td>$7,685.00</td>
<td>$3,544.00</td>
<td>$5,834.00</td>
<td>$10,583.00</td>
</tr>
</tbody>
</tbody>
</table>
Look at this example: using .slideToggle()
$(document).ready(function() {
$('thead').on('click', function () {
$(this).parent().next('div').slideToggle(500);
});
});
table {
width: 750px;
border-collapse: collapse;
}
thead {
width: 100%;
}
th {
background: #3498db;
color: white;
font-weight: bold;
}
td, th {
padding: 10px;
border: 1px solid #ccc;
text-align: left;
font-size: 18px;
}
.labels tr td {
background-color: #2cc16a;
font-weight: bold;
color: #fff;
}
.label tr td label {
display: block;
}
[data-toggle="toggle"] {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
<tr><th>Accounting</th></tr>
</thead>
</table>
<div>
<table>
<tbody>
<tr>
<td>Australia</td>
<td>$7,685.00</td>
<td>$3,544.00</td>
<td>$5,834.00</td>
<td>$10,583.00</td>
</tr>
<tr>
<td>Central America</td>
<td>$7,685.00</td>
<td>$3,544.00</td>
<td>$5,834.00</td>
<td>$10,583.00</td>
</tr>
</tbody>
</table>
</div>
So I was able to get the transition you wanted, but you'll have to restyle some elements. In order to manipulate the height of table elements you have to make them display block, which tends to mess up the style a bit. You should be able to get it back, just have to play with some widths and heights a little. But here is the updated codepen, I hope its what you were looking for! I wrote the JS vanilla, hope thats okay.
display: block;
I am trying to build this excel table with html and css. The problem i kept facing is the when i try to add different number of columns for different rows, It surpasses the border limit and extends by itself. My intent is to replicate the contents of the picture.
table
{
table-layout: fixed;
border-collapse: collapse;
width: 100%;
border: 3px solid #151515;
}
th, td
{
border: 1px solid #151515;
padding: 12px;
text-align: center;
}
th
{
font-weight: bold;
}
tfoot tr:nth-child(2)
{
font-weight: normal;
height: 100px;
}
.colored td
{
background-color: #aaaaaa;
}
<table>
<tbody>
<tr>
<th colspan="4" class="title">PURCHASE DETAILS</th>
</tr>
<tr class="colored">
<th rowspan="2">BUDGET CODE:</th>
<td>Account Code</td>
<td>Cost Center</td>
<td>Project Code</td>
<td>DEA</td>
</tr>
<tr>
<td>5458</td>
<td>22222</td>
<td>3658954</td>
<td>95874</td>
</tr>
<tr>
<th>PO Number:</th>
<td>PO/SC/2010/33</td>
<th>Supplier:</th>
<td>STORM TECH</td>
</tr>
<tr>
<th>SOF:</th>
<td>00254584</td>
<th>Value (Purchase Price USD):</th>
<td><b>1,084.89</b></td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="2">Plan After Award Ends:</th>
<td colspan="2">Carry Over</td>
</tr>
</tfoot>
</table>
If anybody can assist please.
Not sure table layout is the best choice here, but it can be done. Just create more cells per row and span the cells you need over 2 or 3 "cells"
table
{
table-layout: fixed;
border-collapse: collapse;
width: 100%;
border: 3px solid #151515;
}
th, td
{
border: 1px solid #151515;
padding: 12px;
text-align: center;
}
th
{
font-weight: bold;
}
tfoot tr:nth-child(2)
{
font-weight: normal;
height: 100px;
}
.colored td
{
background-color: #aaaaaa;
}
<table>
<tbody>
<tr>
<th colspan="8" class="title">PURCHASE DETAILS</th>
</tr>
<tr class="colored">
<th rowspan="2">BUDGET CODE:</th>
<td colspan="2">Account Code</td>
<td colspan="2">Cost Center</td>
<td colspan="2">Project Code</td>
<td>DEA</td>
</tr>
<tr>
<td colspan="2">5458</td>
<td colspan="2">22222</td>
<td colspan="2">3658954</td>
<td>95874</td>
</tr>
<tr>
<th>PO Number:</th>
<td colspan="3">PO/SC/2010/33</td>
<th colspan="2">Supplier:</th>
<td colspan="2">STORM TECH</td>
</tr>
<tr>
<th>SOF:</th>
<td colspan="3">00254584</td>
<th colspan="2">Value (Purchase Price USD):</th>
<td colspan="2"><b>1,084.89</b></td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="2">Plan After Award Ends:</th>
<td colspan="6">Carry Over</td>
</tr>
</tfoot>
</table>
I have a problem with my code. The goal is to have a text that appear when a user click on the link. But I want also that when he clicks on the link the only text that show is the text underneath and not in all the cells. Can someone has a clue on what I did wrong? I will probable add other links (more than 2) and I want to be sure that it will work every time.
$(document).ready(function() {
$(".toggler").click(function(e) {
e.preventDefault();
$('.cat' + $(this).attr('data-prod-cat')).toggle();
});
});
a {
color: #002642;
}
.center {
text-align: center;
}
.toggler,
.cat1 {
font-family: 'Varela Round';
color: white;
}
td {
display: block;
width: auto;
border: 1px dotted #c4a77d;
background-color: #c4a77d;
color: white;
margin-bottom: 10px;
}
#media only screen and (min-width: 70em) {
td {
display: table-cell;
border: 1px dotted #c4a77d;
background-color: #c4a77d;
color: white;
margin-bottom: 0px;
}
}
p {
font-family: 'Varela Round';
font-weight: bold;
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<table cellpadding="0" cellspacing="5" style="table-layout: fixed; width:100%" width="100%">
<tbody>
<tr>
<td>
<table style="width: 100%;text-align:center;">
<tbody>
<tr>
<td>
<p>SOCIÉTÉS: 230</p>
</td>
</tr>
<tr>
<td><a class="toggler" data-prod-cat="1" href="#">+ En savoir plus</a></td>
</tr>
<tr class="cat1" style="display:none">
<td>Part CAC 40 : 40</td>
</tr>
<tr class="cat1" style="display:none">
<td>Part Filiales +100MK€: 190</td>
</tr>
</tbody>
</table>
</td>
<td>
<table style="width: 100%;text-align:center;">
<tbody>
<tr>
<td>
<p>CONTACTS: 16 700</p>
</td>
</tr>
<tr>
<td><a class="toggler" data-prod-cat="1" href="#">+ En savoir plus</a></td>
</tr>
<tr class="cat1" style="display:none">
<td>Part CAC 40 : 10 000</td>
</tr>
<tr class="cat1" style="display:none">
<td>Part Filiales +100MK€: 6 700</td>
</tr>
</tbody>
</table>
</td>
<td>
<p>EMAIL NOMINATIF</p>
</td>
<td>
<p>OPT OUT</p>
</td>
<td>
<p>LIGNES DIRECTES/MOBILES</p>
</td>
</tr>
</tbody>
</table>
You have just to go up to the parent table using closest('table') function and then select all the text's related to the current clicked .toggler using .find('[class^="cat"]') like :
$(document).ready(function() {
$(".toggler").click(function(e) {
e.preventDefault();
$(this).closest('table').find('[class^="cat"]').toggle();
});
});
Hope this helps.
$(document).ready(function() {
$(".toggler").click(function(e) {
e.preventDefault();
$(this).closest('table').find('[class^="cat"]').toggle();
});
});
a {
color: #002642;
}
.center {
text-align: center;
}
.toggler,
.cat1 {
font-family: 'Varela Round';
color: white;
}
td {
display: block;
width: auto;
border: 1px dotted #c4a77d;
background-color: #c4a77d;
color: white;
margin-bottom: 10px;
}
#media only screen and (min-width: 70em) {
td {
display: table-cell;
border: 1px dotted #c4a77d;
background-color: #c4a77d;
color: white;
margin-bottom: 0px;
}
}
p {
font-family: 'Varela Round';
font-weight: bold;
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<table cellpadding="0" cellspacing="5" style="table-layout: fixed; width:100%" width="100%">
<tbody>
<tr>
<td>
<table style="width: 100%;text-align:center;">
<tbody>
<tr>
<td>
<p>SOCIÉTÉS: 230</p>
</td>
</tr>
<tr>
<td><a class="toggler" data-prod-cat="1" href="#">+ En savoir plus</a></td>
</tr>
<tr class="cat1" style="display:none">
<td>Part CAC 40 : 40</td>
</tr>
<tr class="cat1" style="display:none">
<td>Part Filiales +100MK€: 190</td>
</tr>
</tbody>
</table>
</td>
<td>
<table style="width: 100%;text-align:center;">
<tbody>
<tr>
<td>
<p>CONTACTS: 16 700</p>
</td>
</tr>
<tr>
<td>
<a class="toggler" data-prod-cat="1" href="#">+ En savoir plus</a></td>
</tr>
<tr class="cat1" style="display:none">
<td>Part CAC 40 : 10 000</td>
</tr>
<tr class="cat1" style="display:none">
<td>Part Filiales +100MK€: 6 700</td>
</tr>
</tbody>
</table>
</td>
<td>
<p>EMAIL NOMINATIF</p>
</td>
<td>
<p>OPT OUT</p>
</td>
<td>
<p>LIGNES DIRECTES/MOBILES</p>
</td>
</tr>
</tbody>
</table>
Based on your code, I guess you are trying to use data-prod-cat attribute to know which block needs to appear.
But in both of your block you have data-prod-cat="1" which means that you will activate both blocks on every action.
Try changing the 2nd block attribute to :
data-prod-cat="2"
You'll also need to update the css class in your other <tr>
You need to get the parent of <a> first then get that parent which is <tr>. Finally filter on cat1 class to toggle all siblings containing the cat1 class.
$(document).ready(function() {
$(".toggler").click(function(e) {
e.preventDefault();
$(this).parent().parent().siblings().filter(".cat1").toggle();
});
});
$(document).ready(function() {
$(".toggler").click(function(e) {
e.preventDefault();
$(this).parent().parent().siblings().filter(".cat1").toggle();
});
});
a {
color: #002642;
}
.center {
text-align: center;
}
.toggler,
.cat1 {
font-family: 'Varela Round';
color: white;
}
td {
display: block;
width: auto;
border: 1px dotted #c4a77d;
background-color: #c4a77d;
color: white;
margin-bottom: 10px;
}
#media only screen and (min-width: 70em) {
td {
display: table-cell;
border: 1px dotted #c4a77d;
background-color: #c4a77d;
color: white;
margin-bottom: 0px;
}
}
p {
font-family: 'Varela Round';
font-weight: bold;
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<table cellpadding="0" cellspacing="5" style="table-layout: fixed; width:100%" width="100%">
<tbody>
<tr>
<td>
<table style="width: 100%;text-align:center;">
<tbody>
<tr>
<td>
<p>SOCIÉTÉS: 230</p>
</td>
</tr>
<tr>
<td><a class="toggler" data-prod-cat="1" href="#">+ En savoir plus</a></td>
</tr>
<tr class="cat1" style="display:none">
<td>Part CAC 40 : 40</td>
</tr>
<tr class="cat1" style="display:none">
<td>Part Filiales +100MK€: 190</td>
</tr>
</tbody>
</table>
</td>
<td>
<table style="width: 100%;text-align:center;">
<tbody>
<tr>
<td>
<p>CONTACTS: 16 700</p>
</td>
</tr>
<tr>
<td><a class="toggler" data-prod-cat="1" href="#">+ En savoir plus</a></td>
</tr>
<tr class="cat1" style="display:none">
<td>Part CAC 40 : 10 000</td>
</tr>
<tr class="cat1" style="display:none">
<td>Part Filiales +100MK€: 6 700</td>
</tr>
</tbody>
</table>
</td>
<td>
<p>EMAIL NOMINATIF</p>
</td>
<td>
<p>OPT OUT</p>
</td>
<td>
<p>LIGNES DIRECTES/MOBILES</p>
</td>
</tr>
</tbody>
</table>
inside td I am taking a table, but somehow table is not taking the td full height. can any one help me to fix this issue.
html for table:
<table style="height: auto">
<tr>
<td style="background-color: red">
<table style="background-color: orange">
<tr>
<td>
<div style="height: 20px; width: 2px; background-color: black; vertical-align: top"></div>
<div style="height: 2px; width: 20px; background-color: black; vertical-align: bottom"></div>
</td>
</tr>
<tr style="height: 100%;">
<td>
<div style="height: 100%; width: 2px; background-color: black;"></div>
</td>
</tr>
</table>
</td>
<td style="background-color: yellow">
<table>
<tr>
<td>Description</td>
</tr>
<tr>
<td>Expression</td>
</tr>
</table>
</td>
</tr>
</table>
You can't force an object to take up 100% of the height of a cell without writing some JavaScript that will figure out the height of the cell and resize the table programatically.
I'm not really sure what your goal is with this, but you can achieve the look you seem to want by setting the background on the td and set a border to get the red outline.
<table style="height: auto">
<tr>
<td style="background-color: orange; border: solid red 1px">
<table>
<tr>
<td>
<div style="height: 20px; width: 2px; background-color: black; vertical-align: top"></div>
<div style="height: 2px; width: 20px; background-color: black; vertical-align: bottom"></div>
</td>
</tr>
<tr style="height: 100%;">
<td>
<div style="height: 100%; width: 2px; background-color: black;"></div>
</td>
</tr>
</table>
</td>
<td style="background-color: yellow">
<table>
<tr>
<td>Description</td>
</tr>
<tr>
<td>Expression</td>
</tr>
</table>
</td>
</tr>
</table>