I have a textarea in the td cell of each row in column 3, to hold description specific to each row.
When the user clicks on the td, the current description in the textarea inside the td should be copied over to the textarea inside #div_toggle
Here is what I am trying to accomplish.
The user would make changes to the description in #div_toggle, and when done, will click 'X' to close the div. This should cause the contents to be transferred from the textarea in #div_toggle to the td cell textarea.
Would you be able to help me achieve this goal? Or am I complicating this? Is there a better approach?
Below is the code I have thus far, but it does not work as desired or described above. Please help.
Best regards.
<!DOCTYPE html>
<html>
<head>
<style>
th,
td {
border: solid 1px lightgrey;
}
#div_toggle {
display: none;
border: 1px solid black;
margin: 10px;
}
#div_toggle textarea {
width: 200px;
height: 150px;
border: 3px solid #cccccc;
padding: 5px;
font-family: Tahoma, sans-serif;
}
#close_text {
position: absolute;
right: 27px;
cursor: pointer;
padding: 5px;
background: #cfd0d1;
border-radius: 4px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script>
$(document).ready(function() {
//Show textarea
$('.cell_id').click(function() {
$('#div_toggle').slideToggle('slow');
});
//Close textarea
$('#close_text').click(function() {
var tbl = $('#itemtable');
var rows = $('tr', tbl);
//get toggle div text area contents into td cell textarea
rows.eq(clickedrowindex).find('td:nth-child(3)').text() = $('#div_toggle textarea#notescopy').val();
$('#div_toggle').slideToggle('slow');
});
var clickedrowindex;
$('#itemtable').find('tr').click( function(){
clickedrowindex = $(this).closest('tr').index();
//get td cell textarea contents into the toggle div text area
var notestext = $(this).find('td:nth-child(3)').text();
$('#div_toggle textarea#notescopy').val(notestext);
});
});
</script>
</head>
<body>
<div class="left" style="margin-top:5px; border: solid #666 1px;">
<table id="itemtable" class="" style="width: 300px; margin: 10px;">
<thead style="color:black;">
<tr>
<th>Year</th>
<th>Model</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td> 2013</td>
<td> Toyota</td>
<td class='cell_id'><textarea name='reqnotes'></textarea></td>
</tr>
<tr>
<td> 2001</td>
<td> Honda</td>
<td class='cell_id'><textarea name='reqnotes'></textarea></td>
</tr>
</tbody>
</table>
<div id="div_toggle"><textarea id='notescopy'></textarea>
<span id="close_text" title="Click to close">X</span>
</div>
</div>
</body>
</html>
You do not need that much of code and its can simplified to just two functions to achieve your desired results.
Firstly, we just need to make sure that we save the our current target (td > textarea) in variable and use that variable to assign val to the textarea accordingly.
Also, we need to use a class .div_toggle selector not an id #div_toggle - Since id will only pick the element which is found firstly but in our case we need to change value dynamically on each slideDown and SlideUp event.
Lastly, for this you need to use slideDown and slideUp on X button click. Its work the same way as slideToggle. Using slideToggle will create a weird behaviour.
When you click the X the content you typed in the toggle div textarea will be transfered to the td you clicked on as your target
Live Working Demo:
$(document).ready(function() {
let currentTar; //save current target
let divToggle = $('.div_toggle') //get element
//Show textarea
$('.cell_id').click(function(event) {
currentTar = event.currentTarget
divToggle.slideDown('slow');
let getText = $(this).find('textarea').val()
divToggle.find('textarea').val(getText)
});
//Close textarea
$('#close_text').click(function() {
divToggle.slideUp('slow');
let assignVal = divToggle.find('textarea').val();
$(currentTar).find('textarea').val(assignVal)
});
});
th,
td {
border: solid 1px lightgrey;
}
.div_toggle {
display: none;
border: 1px solid black;
margin: 10px;
}
.div_toggle textarea {
width: 200px;
height: 150px;
border: 3px solid #cccccc;
padding: 5px;
font-family: Tahoma, sans-serif;
}
#close_text {
position: absolute;
right: 27px;
cursor: pointer;
padding: 5px;
background: #cfd0d1;
border-radius: 4px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="left" style="margin-top:5px; border: solid #666 1px;">
<table id="itemtable" class="" style="width: 300px; margin: 10px;">
<thead style="color:black;">
<tr>
<th>Year</th>
<th>Model</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td> 2013</td>
<td> Toyota</td>
<td class='cell_id'><textarea name='reqnotes'>Test</textarea></td>
</tr>
<tr>
<td> 2001</td>
<td> Honda</td>
<td class='cell_id'><textarea name='reqnotes'>Foo</textarea></td>
</tr>
<tr>
<td> 2040</td>
<td> Elon Musk</td>
<td class='cell_id'><textarea name='reqnotes'>Tesla</textarea>
</td>
</tr>
</tbody>
</table>
<div class="div_toggle"><textarea id='notescopy'></textarea>
<span id="close_text" title="Click to close">X</span>
</div>
</div>
</body>
A few minor changes. Utilize $(this).val() instead of doing a find for the closest :)
You'll notice the code is much cleaner as well.
$(document).ready(function() {
$("textarea").click(function(){
var contents = $(this).val();
$('#notescopy').val(contents);
});
//Show textarea
$('.cell_id').click(function() {
$('#div_toggle').slideToggle('slow');
});
//Close textarea
$('#close_text').click(function() {
$('#div_toggle').slideToggle('slow');
});
});
th,
td {
border: solid 1px lightgrey;
}
#div_toggle {
display: none;
border: 1px solid black;
margin: 10px;
}
#div_toggle textarea {
width: 200px;
height: 150px;
border: 3px solid #cccccc;
padding: 5px;
font-family: Tahoma, sans-serif;
}
#close_text {
position: absolute;
right: 27px;
cursor: pointer;
padding: 5px;
background: #cfd0d1;
border-radius: 4px;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
</head>
<body>
<div class="left" style="margin-top:5px; border: solid #666 1px;">
<table id="itemtable" class="" style="width: 300px; margin: 10px;">
<thead style="color:black;">
<tr>
<th>Year</th>
<th>Model</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td> 2013</td>
<td> Toyota</td>
<td class='cell_id'><textarea name='reqnotes'></textarea></td>
</tr>
<tr>
<td> 2001</td>
<td> Honda</td>
<td class='cell_id'><textarea name='reqnotes'></textarea></td>
</tr>
</tbody>
</table>
<div id="div_toggle"><textarea id='notescopy'></textarea>
<span id="close_text" title="Click to close">X</span>
</div>
</div>
</body>
</html>
Related
I have HTML table with scroll. On cell clicking, one custom component opens. Want to scroll that custom component also.
jsfiddle Link:: https://jsfiddle.net/rujz69nq/4/
The expected result is that custom component should open over the table. so when clicking on the last row it will not take extra space inside the table.
Any Help?
$(document).ready(function () {
$("#test").click(
function () {
appendContainer();
}
);
});
function appendContainer() {
$('#test').after("<div class='floatContainer'><div>test1</div></br><div>test2</div></br><div>test3</div></br><div>test4</div> </div>");
}
$(document).mouseup(function(e)
{
var container = $("#test");
// if the target of the click isn't the container nor a descendant of the container
if (!container.is(e.target) && container.has(e.target).length === 0)
{
$('.floatContainer').hide();
}
});
table, th, td {
border: 1px solid black;
padding:5px;
}
.positionRelative {
position:relative;
background-color: yellow;
}
.floatContainer{
position: absolute;
background-color: red;
margin: 5px;
padding: 0 5px;
height:60px;
overflow-y : scroll;
}
#container{
border: 1px solid blue;
height: 100px;
overflow-y:scroll;
}
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<body>
<h2>Test table:</h2>
<div id="container">
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td class="positionRelative">
<div>
<div id="test"> test
</div>
</div>
</td>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
</table>
</div>
</body>
</html>
I have this simple html code. I am simply trying to format the colors but none of the CSS is actually formatting it.
I've tried changing the variables names, changing the table class to id and vice-versa.
<head>
<style>
.cool-table {
width: 500px;
border: 1px solid #000;
background-color: blue;
color: purple;
}
.cool-table tr:first-child td {
font-size: 30px;
background-color: red;
color: green;
}
#cell-style {
font-size: 8px;
text-align: left;
}
</style>
</head>
<html>
<body>
<table class="cool-table">
<tr>
<th id="cell-style">Fruit</th>
<th id="cell-style">Price</th>
</tr>
<tr>
<th id="cell-style">Apples</th>
<th id="cell-style">$10</th>
</tr>
<tr>
<th id="cell-style">Banana</th>
<th id="cell-style">$50</th>
</tr>
<tr>
<th id="cell-style">Mango</th>
<th id="cell-style">$20</th>
</tr>
</table>
</body>
</html>
It should show the entire table background as blue and the text should be purple. The first row's text should be large with a red background and green text. The rest of the cells should have a blue background with purple text and size 8px font.
Change your header cells to th and the normal cells to td. That way you do not need a id, class or tr:first-child to separate the header row from the rest. Note that if you use id, you should only use it on a single HTML tag. For multiple tags use class instead.
<html>
<head>
<style>
.cool-table {
width: 500px;
border: 1px solid #000;
background-color: blue;
color: purple;
}
.cool-table th { /* Changed to th, no need for tr:first-child */
font-size: 30px;
background-color: red;
color: green;
}
.cool-table td { /* Styling td-tags (table cells) */
font-size: 8px;
text-align: left;
}
</style>
</head>
<body>
<table class="cool-table">
<tr>
<th>Fruit</th> <!-- Keep as th -->
<th>Price</th>
</tr>
<tr>
<td>Apples</td> <!-- Changed to td -->
<td>$10</td>
</tr>
<tr>
<td>Banana</td>
<td>$50</td>
</tr>
<tr>
<td>Mango</td>
<td>$20</td>
</tr>
</table>
</body>
</html>
You can simply do it this way :
.cool-table {
width: 500px;
border: 1px solid #000;
background-color: blue;
color: purple;
}
.cool-table tr:first-child {
background-color: red;
color: green !important;
}
.cool-table tr:not(:first-child) {
font-size: 8px;
text-align: left;
}
<table class="cool-table">
<tr>
<th>Fruit</th>
<th>Price</th>
</tr>
<tr>
<th>Apples</th>
<th>$10</th>
</tr>
<tr>
<th>Banana</th>
<th>$50</th>
</tr>
<tr>
<th>Mango</th>
<th>$20</th>
</tr>
</table>
The first-child has a red background and green color, and everything that is NOT the first child gets a font-size of 8 and is aligned to the left.
There are several issues to look at.
style tag belongs in head tag which belongs in the html tag.
You can't use multiple ids in the same document - they're supposed to be unique. Try using a class like below.
the second css block doesn't do anything. Maybe you want to remove the td from the selector like below?
Several of your styles are not being applied because they override each other. Try making the selectors more specific to give them higher precedence.
You really want to understand the structure of html documents. You can verify them using the w3 validator
You can also learn more about CSS from Mozilla.
<!doctype html>
<html><head>
<style>
.cool-table {
width: 500px;
border: 1px solid #000;
background-color: blue;
color: purple;
}
.cool-table tr:first-child { /* removed 'td' */
font-size: 30px;
background-color: red;
color: green;
}
.cell-style { /* changed to class */
font-size: 8px;
text-align: left;
color: yellow;
}
</style>
</head><body>
<table class="cool-table">
<tr>
<th class="cell-style">Fruit</th>
<th class="cell-style">Price</th>
</tr>
<tr>
<th class="cell-style">Apples</th>
<th class="cell-style">$10</th>
</tr>
<tr>
<th class="cell-style">Banana</th>
<th class="cell-style">$50</th>
</tr>
<tr>
<th class="cell-style">Mango</th>
<th class="cell-style">$20</th>
</tr>
</table>
</body>
</html>
How can I add a white space around the background color of a table cell in CSS? I have this, but the background color goes all the way to the edge. Padding seems to work for the content, but not the background color.
#main-monitor {
width: 100%;
}
#main-monitor td, #main-monitor th {
border: 3px solid #999;
padding: 4px;
}
EDIT: Here's my full CSS that matters to these pieces. I've made a couple updates, but am still having the same issue.
#main-monitor {
width: 100%;
}
#main-monitor th {
border: 3px solid #999;
padding: 3px;
text-align: center;
padding-top: 12px;
padding-bottom: 12px;
}
#main-monitor td {
background-color: white;
border: 3px solid #999;
margin: 2px;
}
#main-monitor td span {
margin: 5px;
}
It's being applied to a table in this partial view:
<table id="main-monitor">
<thead>
<tr>
<th>
#Html.DisplayNameFor(m => m.Name)
</th>
<th>
#Html.DisplayNameFor(m => m.A)
</th>
<th>
#Html.DisplayNameFor(m => m.B)
</th>
<th>
#Html.DisplayNameFor(m => m.C)
</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<tr>
<td>#item.Name</td>
<td style="background-color:#item.AColor"><span>#item.A</span></td>
<td style="background-color:#item.BColor"><span>#item.B</span></td>
<td style="background-color:#item.CColor">#item.C</td>
</tr>
}
</tbody>
</table>
Solution 1
As mentioned by "Advait S", You can use the border-spacing css rule for table tags
Here is a practical example
td {
background: red;
}
table {
border-spacing: 10px;
}
<table>
<tr>
<td><span>xxx</span></td>
<td><span>xxx</span></td>
</tr>
<tr>
<td><span>xxx</span></td>
<td><span>xxx</span></td>
</tr>
</table>
Solution 2
Despite solution 1 is elegant. you can change the display property to your table cell to inline-block and then apply a margin to your cells
snippet below
td{
background:red;
margin:10px;
display:inline-block;
}
<table>
<tr>
<td><span>xxx</span></td>
<td><span>xxx</span></td>
</tr>
<tr>
<td><span>xxx</span></td>
<td><span>xxx</span></td>
</tr>
</table>
You can also try this.
Write the text of table in span and apply style as.
HTML
<table>
<tr>
<td><span>Hello</span></td>
</tr>
</table>
CSS
td{
border: 1px Solid Black;
background-color: white;
}
td span{
background-color: blue;
margin: 5px;
}
See this
I have a table with expand/collapse div elements in td.
When expanding in IE9, all is OK, but in Google Chrome (version 16.0.912.75 m) I get unexpected solid borders on differing spots.
It seems as if the colspan=3 tr's have something to do with this, as the solid borders appear above and under those. Also, the div width values seem to influence this: the behavior changes when choosing other values for these.
See below html. I added 4screen prints: initial view, expand row1, expand row2, expand both.
What is causing this odd behavior and how can I prevent it?
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=windows-1252">
<title>Example</title>
<style type="text/css">
table {
border: solid black 1pt;
border-collapse: collapse;
padding: 0;
border-spacing: 0;
}
th {
background: rgb(255, 255, 153);
border-style: solid;
border-color: black;
border-width: 1pt;
padding: 0cm 5pt;
color: black;
font-family: Verdana;
font-size: 10pt;
font-style: normal;
vertical-align: top;
}
td {
border-style: dotted dotted none none;
border-color: black;
border-width: 1pt;
padding: 0cm 5pt;
color: black;
font-style: normal;
font-family: Verdana;
font-size: 10pt;
vertical-align: top;
margin-bottom: 4.5pt;
margin-top: 0pt;
}
div.QUAL {
margin-left:4pt;
font-size: 90%;
}
input.buttonQUAL {
color: blue;
background: white;
border: none;
margin-left:0pt;
margin-top: 0px;
margin-bottom: 0px;
font-size: 100%;
}
div.listQUALdesc {
color: black;
background: white;
font-size: 100%;
}
</style>
<script type="text/javascript" language="javascript">
//expand and collapse functions based on id
function toggleMe(a){
var e = document.getElementById(a);
if(!e) return true;
if( e.style.display == "none")
{
e.style.display = "block"
}
else {
e.style.display = "none"
}
return true;
};
function expandByIdStart(IdStart){
var divs = document.getElementsByTagName('div');
for (var i=0; i<divs.length; i++) {
if (divs[i].id.match("^"+IdStart) == IdStart) {
divs[i].style.display = "block";
}
}
return true;
}
function collapseByIdStart(IdStart){
var divs = document.getElementsByTagName('div');
for (var i=0; i<divs.length; i++) {
if (divs[i].id.match("^"+IdStart) == IdStart) {
divs[i].style.display = "none";
}
}
return true;
}
</script>
</head>
<body>
<p/>
<table style='table-layout:fixed word-break:break-all'>
<col width="70"><col width="70"><col width="70">
<thead><tr><th>Col1</th><th>Col2</th><th>Col3</th></tr></thead>
<tbody>
<tr>
<td>
<input
type="button"
class="buttonQUAL"
onclick="toggleMe('row1'); return true;"
onMouseOver="this.style.cursor='hand'"
value="row1"/>
</td>
<td>text1
<div id="row1" class="listQUALdesc" style="width:100; display:none">
text2
</div>
</td>
<td></td>
</tr>
<tr>
<td><div class="QUAL">xxx</div></td>
<td>text3</td>
<td></td>
</tr>
<tr>
<td colspan="3">Start</td>
</tr>
<tr>
<td>
<input
type="button"
class="buttonQUAL"
onclick="toggleMe('row2'); return true;"
onMouseOver="this.style.cursor='hand'"
value="row2"/>
<div id="row2" class="QUAL" style="display:none;width:65">
text5<br/>
</div>
</td>
<td>text4</td>
<td></td>
</tr>
<tr>
<td colspan="3">End</td>
</tr>
</tbody>
</table>
</body>
</html>
See comments - adding < !doctype html > partly solves the issue
Addition
There are some issues to be found on the web that point at an error in Chrome and Safari (which use webkit) like the following: webkit-colspan-table-border-bug.
It seems that using colspan and bottom-border in combination with border-collapse: collapse leads to border display issues, just as in my example.
Is there a way Firefox keeps the row height, so if data doesn't fill all the body heigth it keeps an empty space below last row? IE behaves this way, so all rows stay on the top.
I want to code a scroll table with fixed header; sometimes there's not sufficient data on table content to fill the fixed table height.
A sample code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" href="reset.css"/>
<style type="text/css">
* {margin:0}
table {
border: solid #66CC99;
border-width: 0px 1px 1px 0px;
width: 400px;
}
th, td {
border: solid #66CC99;
border-width: 1px 0px 0px 1px;
padding: 4px;
}
th {
background-color: #339999;
color: #FFFFFF;
}
tr.alt td {
background-color: #EEEEEE;
}
tbody {
height: 200px;
overflow-y: auto;
overflow-x: hidden;
}
</style>
<!--[if IE]>
<style type="text/css">
div {
position: relative;
height: 200px;
width: 416px;
overflow-y: scroll;
overflow-x: hidden;
border: solid #66CC99;
border-width: 0px 0px 1px 0px;
}
table {
border-width: 1px 1px 0px 0px;
}
thead tr {
position: absolute;
top: expression(this.offsetParent.scrollTop);
}
tbody {
height: auto;
}
table tbody tr:first-child td {
padding: 29px 4px 4px 4px;
}
</style>
<![endif]-->
</head><body>
<table class="treeTable" id="table" cellpadding="0" cellspacing="0" width="100%">
<thead>
<tr>
<th id="col1" class="text" style="width: 100%;" nowrap="nowrap">NAME</th>
<th class="selectable" style="width: 14em;" id="th-122002" nowrap="nowrap">12/2002</th>
<th class="selectable" style="width: 14em;" id="th-122007" nowrap="nowrap">12/2007</th>
<th class="selectable" style="width: 14em;" id="th-072010" nowrap="nowrap">07/2010</th>
</tr>
</thead>
<tbody id="tbody">
<tr>
<td>
Name
</td>
<td>
123
</td>
<td>
123
</td>
<td>
123
</td>
</tr>
<tr>
<td>
Name
</td>
<td>
123
</td>
<td>
123
</td>
<td>
123
</td>
</tr>
</tbody>
</table>
</body></html>
One solution that works to a certain extent but doesn't seem perfect is to add this as the last row:
<tr style="height: 100%;"></tr>
It seems to create an empty row that is the size of the area meaning that you can scroll off the bottom til there is only white space which probably isn't ideal. You might be able to play with this a bit (possibly do some rough calculations to work out a sensible height based on how many rows you have) to get a working solution.
Did you specify the height attribute, set it to desired value and then see.
Can you possibly paste your code? I'd also recommend using a reset.css to remove any prejudice different browsers have interpreting your code.
You can set ' ' as a data if there is no value or you can do is set style attribute to your 'td' tag as <td style="height: 15px;"> </td>