I am writing a piece of code to implement an "Add New Deadlines" functionality.
I have 5 "Add" buttons:
<td class="imgButton" style="width: 185px; text-align: center;"
onclick="addDeadline(1)" id="button_1">Add Deadline</td>
<td class="imgButton" style="width: 185px; text-align: center;"
onclick="addDeadline(2)" id="button_2">Add Deadline</td>
<td class="imgButton" style="width: 185px; text-align: center;"
onclick="addDeadline(3)" id="button_3">Add Deadline</td>
<td class="imgButton" style="width: 185px; text-align: center;"
onclick="addDeadline(4)" id="button_4">Add Deadline</td>
<td class="imgButton" style="width: 185px; text-align: center;"
onclick="addDeadline(5)" id="button_5">Add Deadline</td>
I want to implement a javascript addDeadline(num) that can insert the below td after the clicked button.
<td>Deadline 1</td>
<td>Deadline 2</td>
<td>Deadline 3</td>
<td>Deadline 4</td>
<td>Deadline 5</td>
"Deadline 1" should be inserted after the button_1 if it is clicked.
Thanks for your help.
You can fix your code to this to make it work (no jquery just pure js):
function insertAfter(referenceNode, newNode) {
referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}
function addDeadline(num, caller) {
var el = document.createElement("td");
el.innerHTML = "Deadline" + num;
insertAfter(caller, el);
}
<table>
<tr>
<td class="imgButton" style="width: 185px; text-align: center;" onclick="javascript:addDeadline(1,this)" id="button_1">Add Deadline</td>
<td class="imgButton" style="width: 185px; text-align: center;" onclick="addDeadline(2,this)" id="button_2">Add Deadline</td>
<td class="imgButton" style="width: 185px; text-align: center;" onclick="addDeadline(3,this)" id="button_3">Add Deadline</td>
<td class="imgButton" style="width: 185px; text-align: center;" onclick="addDeadline(4,this)" id="button_4">Add Deadline</td>
<td class="imgButton" style="width: 185px; text-align: center;" onclick="addDeadline(5,this)" id="button_5">Add Deadline</td>
</tr>
</table>
To insert new element after clicked element. Refer this
removeAttribute will remove click handler. If you do not want to stop adding tds then remove this line..
event.target will return clicked element
function addDeadline(num) {
var newElem = document.createElement('td');
newElem.innerText = 'Deadline ' + num;
event.target.parentNode.insertBefore(newElem, event.target.nextSibling);
event.target.removeAttribute('onclick')
}
<table>
<tr>
<td class="imgButton" style="width: 185px; text-align: center;" onclick="addDeadline(1)" id="button_1">Add Deadline</td>
<td class="imgButton" style="width: 185px; text-align: center;" onclick="addDeadline(2)" id="button_2">Add Deadline</td>
<td class="imgButton" style="width: 185px; text-align: center;" onclick="addDeadline(3)" id="button_3">Add Deadline</td>
<td class="imgButton" style="width: 185px; text-align: center;" onclick="addDeadline(4)" id="button_4">Add Deadline</td>
<td class="imgButton" style="width: 185px; text-align: center;" onclick="addDeadline(5)" id="button_5">Add Deadline</td>
</tr>
</table>
Fiddle here
http://www.w3schools.com/js/js_htmldom_nodes.asp
You can use that as an example, of course modifying it according to your table. You can point to the table with the id, and the add the elements you want.
Or:
document.getElementById('TABLE_ID').innerHTML += '<td> Deadline X </td>';
X can be stored in a variable.
Hope that helps!
You can write insertAfter() function like this:
function addDeadline(num) {
$( "<td>Deadline "+num+"</td>" ).insertAfter( "#button_"+num );
}
Related
I am trying to make HTML and CSS combination to achive columns that stick to each other. The fiddle shows everthing i want to achive but i had to put "left:" parameter manualy. Can i write something in JS or in CSS so i won't have to put this parameter manualy everytime i use other width of column?
Idea:
3 columns are sticky so: first one is left: 0 and second is left: x and third is left: y.
Is there a way to make them dynamic so it will work with random x and y.
td,
th {
position: sticky;
top: 0;
align-self: flex-start;
left: 0;
background-color: #fff;
z-index: 100;
}
.ddd {
position: sticky;
top: 0;
align-self: flex-start;
left: 0;
background-color: #fff;
z-index: 101;
}
.dddd {
position: sticky;
top: 0;
align-self: flex-start;
left: 90px;
background-color: #fff;
z-index: 101;
}
.ddddd {
position: sticky;
top: 0;
align-self: flex-start;
left: 190px;
background-color: #fff;
z-index: 101;
}
<table style="width:2000px" border="1">
<tr >
<th style="width:90px" class="sticky-col">Firstname</th>
<th style="width:100px" class="sticky-to-left-elem">Lastname</th>
<th style="width:140px">Age</th>
<td style="width:40px">Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr >
<td style="width:90px" class="sticky-col">Jill</td>
<td style="width:100px" class="sticky-to-left-elem">Smith</td>
<td style="width:140px">50</td>
<td style="width:40px">Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr >
<td style="width:90px" class="sticky-col">Eve</td>
<td style="width:100px" class="sticky-to-left-elem">Jackson</td>
<td style="width:140px">94</td>
<td style="width:40px">Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td style="width:90px" class="sticky-col">Eve</td>
<td style="width:100px" class="sticky-to-left-elem">Jackson</td>
<td style="width:140px">94</td>
<td style="width:40px">Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td style="width:90px" class="sticky-col">Eve</td>
<td style="width:100px" class="sticky-to-left-elem">Jackson</td>
<td style="width:140px">94</td>
<td style="width:40px">Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</tr>
<tr>
<td style="width:90px" class="sticky-col">Eve</td>
<td style="width:100px" class="sticky-to-left-elem">Jackson</td>
<td style="width:140px">94</td>
<td style="width:40px">Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</tr>
<tr>
<td style="width:90px" class="sticky-col">Eve</td>
<td style="width:100px" class="sticky-to-left-elem">Jackson</td>
<td style="width:140px">94</td>
<td style="width:40px">Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
https://jsfiddle.net/e0xc69dg/
use flexbox.
.container {
display: flex;
flex-direction: row;
margin-bottom: 1rem;
}
.container.full-width .item {
flex: 1 1 auto;
}
.container.auto-width .item {
flex: 0 1 auto;
}
.item {
color: white;
}
.item-1 {
background: red;
}
.item-2 {
background: purple;
}
.item-3 {
background: blue;
}
<div class="container full-width">
<div class="item item-1">
row 1 with very loooooooooong text
</div>
<div class="item item-2">
row 2 with short text
</div>
<div class="item item-3">
row 3
</div>
</div>
<div class="container auto-width">
<div class="item item-1">
row 1 with very loooooooooong text
</div>
<div class="item item-2">
row 2 with short text
</div>
<div class="item item-3">
row 3
</div>
</div>
First of all I would like you to know that before I make a post here I read a lot about this subject but still can't apply the idea so this post is after long time of searching...
This is HTML Code
<!DOCTYPE html>
<html>
<head>
<title>test₺</title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container-fluid" style="margin: 0; padding: 0;">
<nav style="height: 30px; width: 100%; background-color: dodgerblue"></nav>
</div>
<div class="container">
<div class="row">
<div class="menu col-sm-6">
<div class="mealType burger">
<div class="categoryTitle">Burger</div>
<div class="categoryContent" id="burger">
<table>
<tr>
<td><img src="images/meal.png" alt=""></td>
<td>Chicken Burger</td>
<td>18<span>₺</span></td>
<td class="add">+</td>
<td>-</td>
<td>0<span>x</span></td>
<td>0<span>₺</span></td>
</tr>
<tr>
<td><img src="images/meal.png" alt=""></td>
<td>Fish Burger</td>
<td>15<span>₺</span></td>
<td class="add">+</td>
<td>-</td>
<td>0<span>x</span></td>
<td>0<span>₺</span></td>
</tr>
<tr>
<td><img src="images/meal.png" alt=""></td>
<td>Barbeque</td>
<td>12<span>₺</span></td>
<td class="add">+</td>
<td>-</td>
<td>0<span>x</span></td>
<td>0<span>₺</span></td>
</tr>
</table>
</div>
</div>
<div class="mealType seaFood">
<div class="categoryTitle">Sea Food</div>
<div class="categoryContent" id="seaFood">
<table>
<tr>
<td><img src="images/meal.png" alt=""></td>
<td>Fish Sliece</td>
<td>18<span>₺</span></td>
<td class="add">+</td>
<td>-</td>
<td>0<span>x</span></td>
<td>0<span>₺</span></td>
</tr>
<tr>
<td><img src="images/meal.png" alt=""></td>
<td>Fillet Fish</td>
<td>25<span>₺</span></td>
<td class="add">+</td>
<td>-</td>
<td class="add">0<span>x</span></td>
<td>0<span>₺</span></td>
</tr>
<tr>
<td><img src="images/meal.png" alt=""></td>
<td>Hamour Fish</td>
<td>40<span>₺</span></td>
<td class="add">+</td>
<td>-</td>
<td>0<span>x</span></td>
<td>0<span>₺</span></td>
</tr>
</table>
</div>
</div>
<div class="mealType steak">
<div class="categoryTitle">Steak</div>
<div class="categoryContent" id="seaFood">
<table>
<tr>
<td><img src="images/meal.png" alt=""></td>
<td>Chicken Steak</td>
<td>18<span>₺</span></td>
<td class="add">+</td>
<td>-</td>
<td>0<span>x</span></td>
<td>0<span>₺</span></td>
</tr>
<tr>
<td><img src="images/meal.png" alt=""></td>
<td>Beef Steak</td>
<td>25<span>₺</span></td>
<td class="add">+</td>
<td>-</td>
<td>0<span>x</span></td>
<td>0<span>₺</span></td>
</tr>
</table>
</div>
</div>
</div>
<div class="myCart col-sm-6">
<div class="myCartContaier">
<div class="myCartTitle">My Cart</div>
<div class="myCartDetails">
<table></table>
</div>
</div>
</div>
</div>
</div>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
Javascript jQuery Code
'use strict';
// Start Remove the ability to select //
$(".mealType, .categoryTitle, .categoryContent, .table").attr('unselectable', 'on').css('user-select', 'none').on('selectstart', false);
// End Remove the ability to select //
$(function(){
$('.categoryTitle').on('click', function(){
var $this = $(this);
$this.next('div').slideToggle(200);
});
$('.add').on('click', function(){
var $this = $(this),
$elementToClone = $this.parent(),
$myCartDetails = $this.parent().parent().parent().parent().parent().parent().next().children().children().next().children();
if ($myCartDetails.children().hasClass('addCloned')) {
$($myCartDetails.children()).removeClass('addCLoned').detach();
} else {
$elementToClone.clone(true,true).appendTo($myCartDetails).addClass('addCloned');
}
});
});
CSS code if needed
* {
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
.menu {
background-color: white;
width: 200px;
}
.mealType {
background-color: red;
width: 400px;
margin: 0 auto;
box-shadow: 1px 1px 10px silver;
}
.menu, .myCart {
margin-top:0rem;
padding: 10px;
}
.categoryTitle {
background-color: dodgerblue;
width: 400px;
margin: 0 auto;
margin-top: 20px;
padding: 5px;
color: white;
font-weight: bold;
font-family: Calibri, sans-serif, Tahoma, Arial;
font-size: 18px;
text-shadow: 1px 1px 2px black;
cursor: pointer;
}
.categoryContent {
display: none;
}
.categoryTitle, .myCartTitle {
text-align: center;
}
table {
margin: 0 auto;
width: 400px;
}
table tr {
border-bottom: 1px solid silver;
}
table tr:nth-child(even) {
background-color: white;
}
table tr:nth-child(odd) {
background-color: #EEE;
}
table td {
padding: 5px 10px;
text-align: center;
color: black;
font-family: Calibri, sans-serif, Tahoma, Arial;
}
td img {
width: 30px;
}
table tr td:nth-of-type(4),table tr td:nth-of-type(5) {
cursor: pointer;
}
the idea is Add to cart by javascript I tried the clone with the argument (true,true) but still I am not able to apply the idea that I want I tried a lot of things but I am really unable to apply the idea that I want so I posted in stackoverflow hopefully there's a hero will guide me to the right way to apply like this idea and I really appreciate his effort I am waiting for you guys thanks a lot.
Click To See Simple Image Of The Idea
$myCartDetails = $this.parent().parent().parent().parent().parent().parent().next().children().children().next().children();
You really need to go back and learn the fundamental concepts of javascript, html, and css before you even try to make a cart.
I'm creating online cart. In that i'm getting values through jquery/json GET from my spring/hibernate and it is running with no problems. I've some bugs in adding them in js class now I just want to read each row's textbox's value by it's name.
for Eg:
var product = $('[name="product"]').val();
var vendor = $('[name="vendor"]').val();
<table style="width: 90%; margin: 15px;">
<thead>
<tr style="border-bottom: 2px solid gray;">
<th style="float: left; text-align: left !important" width="50%">Product
Details</th>
<th style="float: left; text-align: left !important" width="25%">Vendor</th>
<th style="float: left; text-align: left !important" width="20%">Quantity</th>
<th style="float: left; text-align: left !important" width="5%"></th>
</tr>
</thead>
<tbody id="tbdyProducts"
style="min-height: 300px; max-height: 300px; overflow: auto; display: block;">
<tr>
<td style="padding-top: 15px; float: left; width: 350px"><span
id="product1" name="product">Xperia M Dual</span></td>
<td style="padding-top: 15px; float: left; width: 190px"><span
id="vendorname1" name="seller" style="height: 20px">sample
vendorname</span></td>
<td style="padding-top: 15px; float: left; width: 100px"><input
type="text" id="proqty1" name="proqty" size="5"
style="height: 20px; text-align: center" value=""></td>
<td align="right" valign="bottom" style="width: 55px"><span
id="deleteRow" onclick="ProductRemove(1)" class="deleteRow"
style="cursor: pointer; cursor: hand">X</span><input type="hidden"
id="hsrate1" name="hsrate" value="250.50"></td>
</tr>
<tr>
<td style="padding-top: 15px; float: left; width: 350px"><span
id="product2" name="product">Mouse</span></td>
<td style="padding-top: 15px; float: left; width: 190px"><span
id="vendorname2" name="seller" style="height: 20px">a valid
company or vendor name</span></td>
<td style="padding-top: 15px; float: left; width: 100px"><input
type="text" id="proqty2" name="proqty" size="5"
style="height: 20px; text-align: center" value=""></td>
<td align="right" valign="bottom" style="width: 55px"><span
id="deleteRow" onclick="ProductRemove(2)" class="deleteRow"
style="cursor: pointer; cursor: hand">X</span><input type="hidden"
id="hsrate2" name="hsrate" value="3.00"></td>
</tr>
<tr id="productSearch" style="display: none;">
<td style="padding-top: 15px; float: left; width: 350px"><span
role="status" aria-live="polite" class="ui-helper-hidden-accessible">1
result is available, use up and down arrow keys to navigate.</span><input
type="text" id="productfinder" size="40" style="height: 20px"
autocomplete="off" placeholder="Product Name or Code"
class="ui-autocomplete-input"></td>
<td style="padding-top: 15px; float: left; width: 190px"><span
id="vendorname" style="height: 20px"> </span></td>
<td style="padding-top: 15px; float: left; width: 100px"><input
type="text" size="5" id="productnos"
style="height: 20px; text-align: center"></td>
<td align="right" valign="bottom" style="width: 55px"><span>X</span></td>
</tr>
</tbody>
</table>
I tried like this but it didn't work:
for(i=0; i< $('[name="product"]').length; i++){
var product = $(this).find('[name="product"]').val();
alert(product);
}
Note that your HTML is invalid (in various ways): Table cell elements don't have name or value attributes. If you want to put arbitrary information in attributes, use data-* attributes instead. (You're also using the same id on more than one element; id values must be unique on the page.)
So two issues:
You're using find to look within the elements, but in fact you want the information from the element you're already looking at
You're using val, but the elements in question aren't form fields. It might work, but if so, it's undocumented.
The simple, reliable thing is to use each and attr:
$('[name="product"]').each(function() {
alert($(this).attr("value"));
});
If instead of alerting you want an array of the values, map and get:
var values = $('[name="product"]').map(function() {
return $(this).attr("value");
}).get();
But again, if you want to put arbitrary attrs on, you'll want to use data-name and data-value instead.
You can use eq method for this:
var product = $('[name="product"]').eq(i).val();
alert(product);
but I would suggest you to use each method
$( '[name="product"]' ).each( function() {
var product = $( this ).val();
console.log( product );
});
Update:
If you want to read there vendor also, you can modify each to accept index:
$( '[name="product"]' ).each( function( index ) {
var product = $( this ).val();
var vendor = $( '[name="product"]' ).eq( index ).val();
console.log( product );
console.log( vendor );
});
Please suggest how can i lock the headers in the table not to scroll. Find the sample code : http://jsfiddle.net/7t9qkLc0/14/ .
I want to lock Column1 and Column2 header so that when we scroll down to view the data the table headers are still visible.Thanks in advance.
My html code:
<div id="test" style="float: left; border: 0px solid #99ffff;">
<table cellpadding="2px" cellspacing="2px" style="border: 0px solid #ffffff; margin-right: 15px; margin-bottom: 20px;">
<tr>
<td>
<table cellpadding="2px" cellspacing="2px" style="border: 2px solid #657383; margin-bottom: 15px;" width="300px">
<tr>
<td colspan="3" style="padding-left: 0px; padding-right: 0px; padding-bottom: 0px">
<table width="300px" border="1" class="newTable">
<tr>
<th>Column1</th>
<th>Column2</th>
</tr>
<tr><td class="rowStyle">data 1</td>
<td class="rowStyle">data1 </td></tr>
<tr><td class="rowStyle">data 2</td>
<td class="rowStyle">data2</td></tr>
<tr><td class="rowStyle">data 3</td>
<td class="rowStyle">data3</td></tr>
<tr><td class="rowStyle">data 1</td>
<td class="rowStyle">data1 </td></tr>
<tr><td class="rowStyle">data 2</td>
<td class="rowStyle">data2</td></tr>
<tr><td class="rowStyle">data 1</td>
<td class="rowStyle">data1 </td></tr>
<tr><td class="rowStyle">data 2</td>
<td class="rowStyle">data2</td></tr>
<tr><td class="rowStyle">data 3</td>
<td class="rowStyle">data3</td></tr>
<tr><td class="rowStyle">data 3</td>
<td class="rowStyle">data3</td></tr>
</table></td></tr>
</table>
</td>
</tr>
</table>
</div>
You have to put your header in a seperate table and put a fixed position on it. Take a look at this.
http://jsfiddle.net/7t9qkLc0/47/
<table width="290px" border="1" class="newTable">
<tr>
<th>Column1</th>
<th>Column2</th>
</tr>
</table>
<table style="margin-top:25px">
<tr> ....
Try it like this:
Changed this in the HTML:
<th>Column1
<div>Column111</div>
</th>
<th>Column2
<div>Column222</div>
</th>
(The divs are new)
And add this CSS:
th {
height: 0;
line-height: 0;
padding-top: 0;
padding-bottom: 0;
color: transparent;
border: none;
white-space: nowrap;
}
th div{
position: absolute;
background: blue;
color: #fff;
padding: 9px 25px;
top: 0;
line-height: normal;
border-left: 1px solid #800;
}
NOTE: The css is a little bit rough, but with a little bit styling it will look better
FIDDLE
Another way is to separate the headerline from the table and make them 2 elements.
you could assign the position:fixed; attribute to the th style and then style it to fit in with the table so positioning and overlapping is correct.
th {
position: fixed;
}
I also just found this link that answers your question http://jsfiddle.net/T9Bhm/7/
I'm developing an app using JavaScript and want to use SemanticZoom.
We use only one list view but I have multiple list views in my page.
This is my sample code which I'm using right now:
<section>
<table><tr><td style="width: auto; height: 100%; display: none;" id="myDealsSection">
<table style="height: 100%; margin-left: 80px; margin-bottom:
50px;">
<thead>
<tr>
<td ><span id="MyDealsHead" style="font-size: 20pt; font-family: 'Segoe UI
Light'; padding-left: 5px;">My Deals</span><span id="myDealsHdrArrw"style="font-
size:20pt;"> </span></td>
</tr>
</thead>
<tbody>
<tr>
<td style="width: auto; height: 100%; vertical-align: top;">
<div id="homePageDealsList" aria-label="List of this group's items"style="height:
100%; width: auto;" data-win-control="WinJS.UI.ListView" data-win-options="{
selectionMode: 'none',layout: {type:WinJS.UI.GridLayout} }"></div>
</td>
</tr>
</tbody>
</table>
</td>
<td style="width: 100%; height: 100%; display: none;" id="pinnedDealsSection">
<table style="height: 100%; margin-left: 80px;">
<thead style="width: 100%;">
<tr>
<td><span id="pinnedDeals" style="padding-left:
5px; font-size: 20pt; font-family: 'Segoe UI Light';">Pinned Deals</span><span
id="pinnedDealsHdrArrw" style="font-size:20pt;"> </span></td>
</tr>
</thead>
<tbody>
<tr>
<td style="width: auto; height: 100%; vertical-
align: top;">
<div id="pinnedDealsList"
class="pinnedDealsItemsList" aria-label="List of this group's items" style="height:
100%; width: auto; margin-bottom: 50px;" data-win-control="WinJS.UI.ListView" data-
win-options="{ selectionMode: 'none', layout: {type:WinJS.UI.GridLayout} }"></div>
</td>
</tr>
</tbody>
</table>
</td></tr></table>
</section>
How can I add two list views to zoomed in view?
I am not able to understand how to do that.
For the SemanticZoom sample visit: http://msdn.microsoft.com/en-us/library/windows/apps/hh465492.aspx