How to scroll option-box with TR? - javascript

I have few TR in table, When i click on TR then open a option-box now i want to move this box as per TR position while scrolling, how can i do this?
Its working fine on click but after window scroll this is not moving as per TR
My Code:-
$('tr').click(function(){
var editContentmarginTop = $(this).offset().top;
$('.option-box').show();
$('.option-box').css({
'top': editContentmarginTop
});
});
.main-div{height:2000px;}
.option-box{ display:none;}
.option-box{ background:#ccc; position:fixed; top:0px; left:0px; height:50px; width:50px;}
.table{ margin-left:50px;}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div class="main-div">
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
</tbody>
</table>
</div>
<div class="option-box">Add New</div>

Change position:fixed to position:absolute in .option-box class
check the updated snippet
$('tr').click(function() {
var editContentmarginTop = $(this).offset().top;
$('.option-box').show();
$('.option-box').css({
'top': editContentmarginTop
});
});
.main-div {
height: 2000px;
}
.option-box {
display: none;
}
.option-box {
background: #ccc;
position: absolute;
top: 0px;
left: 0px;
height: 50px;
width: 50px;
}
.table {
margin-left: 50px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div class="main-div">
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
</tbody>
</table>
</div>
<div class="option-box">Add New</div>

Related

Drag and Drop table rows (asp.net mvc)

I need some help with integrating drag and drop functionality into my project. I tried many different ways, but everything is unsuccessful. I stopped on using jquery, however I still have the issue make it running. I will highly appreciate any help.
Here is my view:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css">
<script type="text/javascript" charset="utf8" src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/themes/smoothness/jquery-ui.css">
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
#table-1 tr:hover {
background-color:aqua;
color:#fff;
}
</style>
</head>
<body>
<div class="table-responsive">
<table class="table" id="table-1" cellspacing="0" cellpadding="2">
<thead>
<tr>
<th>ID</th>
<th>Number</th>
<th> Description</th>
</tr>
</thead>
<tbody style="cursor:pointer;">
<tr id="1"><td><div class="dragitem">1</div></td><td><div class="dragitem">One</div></td><td>some text</td></tr>
<tr id="2"><td>2</td><td>Two</td><td>some text</td></tr>
<tr id="3"><td>3</td><td>Three</td><td>some text</td></tr>
<tr id="4"><td>4</td><td>Four</td><td>some text</td></tr>
<tr id="5"><td>5</td><td>Five</td><td>some text</td></tr>
<tr id="6"><td>6</td><td>Six</td><td>some text</td></tr>
</tbody>
</table>
</div>
</body>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
<script>
$(document).ready(function(){
$("table-1").sortable();
})
</script>
In your code you want to short whole table not tr inside tbody, so why your code is fail. Use tbody selector to short table row.
$("#table-1 tbody").sortable();
Note: You are using id so don't forget to add # .
Example:
$(document).ready(function() {
$("#table-1 tbody").sortable();
})
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
#table-1 tr:hover {
background-color: aqua;
color: #fff;
}
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css">
<script type="text/javascript" charset="utf8" src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
<div class="table-responsive">
<table class="table" id="table-1" cellspacing="0" cellpadding="2">
<thead>
<tr>
<th>ID</th>
<th>Number</th>
<th> Description</th>
</tr>
</thead>
<tbody style="cursor:pointer;">
<tr id="1">
<td>
<div class="dragitem">1</div>
</td>
<td>
<div class="dragitem">One</div>
</td>
<td>some text</td>
</tr>
<tr id="2">
<td>2</td>
<td>Two</td>
<td>some text</td>
</tr>
<tr id="3">
<td>3</td>
<td>Three</td>
<td>some text</td>
</tr>
<tr id="4">
<td>4</td>
<td>Four</td>
<td>some text</td>
</tr>
<tr id="5">
<td>5</td>
<td>Five</td>
<td>some text</td>
</tr>
<tr id="6">
<td>6</td>
<td>Six</td>
<td>some text</td>
</tr>
</tbody>
</table>
</div>

HTML prev function on td is returning null or empty

In a <table>with check box in the Last column, on selection of whcih I want to sum the values of previous two <td>.
The js function should sum the values of the columns for which the CheckBox is ticked. But I am stuck at locating the previous <td> itself. The Snippet is as follows.
function doSumAeFunction(){
var prevCell = $(this).closest('tr').prev('td').text();
console.log(prevCell);
alert(prevCell);
}
table {
table-layout: fixed;
width: auto;
border-collapse: collapse;
border: 3px solid purple;
}
table,
th,
td {
border: 1px solid;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<table style="table table-bordered text-center" style="width:auto">
<thead>
<th>Sl No</th>
<th>English</th>
<th>Geography</th>
<th>Maths</th>
<th>Science 2</th>
<th align="center">Select</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>22</td>
<td>15</td>
<td>12</td>
<td>15</td>
<td><input type="checkbox" value="checked" onclick="doSumAeFunction()" /></td>
</tr>
<tr>
<td>1</td>
<td>8</td>
<td>7</td>
<td>10</td>
<td>5</td>
<td><input type="checkbox" value="checked" onclick="doSumAeFunction()" />
</tr>
</tbody>
</table>
<br />
<div>
<div>Sum of Marks</div>
<div id="sum_of_maths">Sum of Maths is: </div>
<div id="sum_of_science">Sum of Science is: </div>
</div>
To get the value in the cell before the checkbox use $(this).parent().prev('td').text():
$('input[type="checkbox"]').change(function() {
var prevCell = $(this).parent().prev('td').text();
console.log(prevCell);
})
table {
table-layout: fixed;
width: auto;
border-collapse: collapse;
border: 3px solid purple;
}
table,
th,
td {
border: 1px solid;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<table style="table table-bordered text-center" style="width:auto">
<thead>
<th>Sl No</th>
<th>English</th>
<th>Geography</th>
<th>Maths</th>
<th>Science 2</th>
<th align="center">Select</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>22</td>
<td>15</td>
<td>12</td>
<td>15</td>
<td><input type="checkbox" value="checked" /></td>
</tr>
<tr>
<td>1</td>
<td>8</td>
<td>7</td>
<td>10</td>
<td>5</td>
<td><input type="checkbox" value="checked" />
</tr>
</tbody>
</table>
<br />
<div>
<div>Sum of Marks</div>
<div id="sum_of_maths">Sum of Maths is: </div>
<div id="sum_of_science">Sum of Science is: </div>
</div>

Displace a table on javascritp

Is it possible to displace a table clicking on a button in Javascript? For instance, pushing on a HTML button to displace the table from the left-corner top to the bottom or the middle of a page? My HTML code: (I can already delete, edit and add.)
<html>
<head>
<title>Displace Table</title>
<link type="text/css" rel="stylesheet" href="tableEdit.css">
</head>
<body>
<div class="container">
<div class="tab tab-1">
<table id="table" border="1">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
</tr>
<tr>
<td>Frank</td>
<td>Nenjim</td>
<td>19</td>
</tr>
<tr>
<td>Alex</td>
<td>Ferreira</td>
<td>23</td>
</tr>
</table>
</div>
<button onclick="">Dislace Table</button>
</div>
</div>
<script src="tableEdit.js"></script>
</body>
Create CSS (Push Table to bottom left)
.mystyle{
position:absolute;
left:0px;
bottom:10px;
}
Create the Displace function
function Displace()
{
var element = document.getElementById("table");
element.classList.add("mystyle");
}
Add to the button
<button onclick="Displace()">Displace Table</button>
You can try this,
function displaceTable(){
let table = document.getElementById("table");
table.classList.add("bottomStyle");
}
.bottomStyle{
position:absolute;
left: 0px;
bottom: 0px;
}
<html>
<head>
<title>Displace Table</title>
<link type="text/css" rel="stylesheet" href="tableEdit.css">
</head>
<body>
<div class="container">
<div id="tab tab-1">
<table id="table" border="1">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
</tr>
<tr>
<td>Frank</td>
<td>Nenjim</td>
<td>19</td>
</tr>
<tr>
<td>Alex</td>
<td>Ferreira</td>
<td>23</td>
</tr>
</table>
</div>
<button
onclick="displaceTable()"
>
Dislace Table
</button>
</div>
</body>
</html>

changing data-target in bootstrap using CSS(first preference) or javascript(secnd preference)

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
#media screen and (min-width:500px)
{
.col-xs-4
{
text-align:center;
}
}
#media screen and (min-width:700px)
{
.col-xs-4
{
text-align:center;
width:100%;
}
}
.col-xs-4{
text-align:center;
}
div .col-xs-4:hover{
}
.btn-primary{
width:100%;
}
</style>
</head>
<body>
<div class="container-fluid">
<h1>Hello World!</h1>
<p>Resize the browser window to see the effect.</p>
<div id="">
<div class="col-xs-4" style="background-color:lavender;"><button type="submit"; data-toggle="collapse"; data-target="#doctorVisit"; class="btn btn-primary">Doctor Visit</button></div>
<div id="doctorVisit" class="collapse">
<table class="table"; width:500px; height:300px; >
<thead>
<tr>
<th>Sr. No.</th>
<th>Visited with</th>
<th>Time</th>
<th>edit</th>
</tr>
</thead>
<tbody>
<tr class="success">
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
<td>Doe</td>
</tr>
<tr class="danger">
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
<td>Doe</td>
</tr>
<tr class="info">
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
<td>Doe</td>
</tr>
</tbody>
</table>
</div>
<div class="col-xs-4" style="background-color:lavender;"><button type="submit"; id="pharmacyVisitBtn" data-toggle="collapse"; data-target="#pharmacyVisit"; class="btn btn-primary">Pharmacy Visit</button></div>
<div id="pharmacyVisit" class="collapse">
<table class="table"; width:500px; height:300px; >
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
<th>edit</th>
</tr>
</thead>
<tbody>
<tr class="success">
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
<td>Doe</td>
</tr>
<tr class="danger">
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
<td>Doe</td>
</tr>
<tr class="info">
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
<td>Doe</td>
</tr>
</tbody>
</table>
</div>
<div class="col-xs-4" style="background-color:lavender;"><button type="submit"; data-toggle="collapse"; data-target="#stockistVisit"; class="btn btn-primary">Stockist Visit</button></div>
<div id="stockistVisit" class="collapse">
<table class="table"; width:500px; height:300px; >
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
<th>edit</th>
</tr>
</thead>
<tbody>
<tr class="success">
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
<td>Doe</td>
</tr>
<tr class="danger">
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
<td>Doe</td>
</tr>
<tr class="info">
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
<td>Doe</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<script>
function show()
{
alert ("hey");
}
</script>
</body>
</html>
please run the above using a server.
refer above code.
Exaplaination: i want to change 'data-target' to the div having id #stockistVisit when the the screen size is small. can i do it using CSS?
and if i can't do it using CSS, can i do it using javascript?
im using angularjs too. can it be done using that too?
You can't change a data attribute using media queries, but you can change it using JavaScript (jQuery example below).
$(window).resize(function() {
if ($(this).width() < 500) $('target-here').data('blue', 1);
else $('target-here').data('blue', 2);
});
.width() returns the window width in pixels. Using some simple conditional statements, you can change the data attribute to different values depending on the current width.

Master-detail with HTML, CSS and jQuery

I want to create a master-detail. So, I follow this tutorial:
http://mrbool.com/how-to-create-a-master-detail-table-with-html-css-and-jquery/26848
I decided to reproduce it, but there is something wrong in my code(?).
Here's my code:
HTML/jQuery
<!DOCTYPE html>
<html>
<head>
<link href="stile.css" rel="stylesheet" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("td:nth-child(1)").html("<img src='images.jpg' class='clk'>");
$(".clk").click(function () {
var index = $(this).parent().parent().index();
var detail = $(this).parent().parent().next();
var status = $(detail).css("display");
if (status === "none")
$(detail).css("display", "table-row");
else
$(detail).css("display", "none");
});
});
</script>
</head>
<body>
<table id="tbSales" rules="rows">
<thead>
<tr>
<th></th>
<th>ID</th>
<th>Date</th>
<th>Items</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr class="saleRow">
<td></td>
<td>01</td>
<td>01/01/2001</td>
<td>2</td>
<td>10,00</td>
</tr>
<tr class="itemsRow">
<td colspan="5"> Itens
<table class="tbItems" rules="rows">
<thead>
<tr>
<th>ID</th>
<th>Description</th>
<th>Quantity</th>
<th>Unit Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>A1</td>
<td>Product A 1</td>
<td>1</td> <td>7,00</td>
</tr>
<tr>
<td>A2</td>
<td>Product A 2</td>
<td>1</td>
<td>3,00</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr class="saleRow">
<td></td>
<td>02</td>
<td>02/02/2001</td>
<td>3</td>
<td>20,00</td>
</tr>
<tr class="itemsRow">
<td colspan="5"> Itens
<table class="tbItems" rules="rows">
<thead>
<tr>
<th>ID</th>
<th>Description</th>
<th>Quantity</th>
<th>Unit Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>B1</td>
<td>Product B 1</td>
<td>1</td>
<td>10,00</td>
</tr>
<tr>
<td>B2</td>
<td>Product B 2</td>
<td>2</td>
<td>5,00</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tbody>
</table>
</body>
CSS:
#tbSales, .tbItems{
width:100%;
border:solid 1px;
}
#tbSales thead th, .tbItems thead th{
text-align:left;
}
#tbSales tr td, .tbItems tr td{
border:solid 1px;
}
#tbSales tr td:nth-child(1){
width:20px;
}
#tbSales tbody tr{
background:#DCDCDC;
}
.tbItems tr{
background:red;
}
#tbSales thead{
background:#4682B4;
}
.itemsRow{
display: none;
}
.tbItems{
font-size:12px;
}
This is what should happen:
This is what happen to me:
The row is empty! Why?
$("td:nth-child(1)")
Is overriding all first children from table.
You need to specify the line in which you want to replace the cell:
$(".saleRow td:nth-child(1)")
Your first line of javascript replaces the contents of all first children from your table.
Change :
$("td:nth-child(1)").html("<img src='images.jpg' class='clk'>");
with :
$("td:nth-child(1)").css("border","red dashed 2px")
and you'll see what I mean.
See it here : http://codepen.io/jeremythille/pen/qELyWX
td:nth-child(1) means "Every first <td> of each <tr> of the whole table". But you have nested tables...

Categories