Moving data betwen tables with "this" - javascript

I have a game that i'm working on and in it theres a shop that has two divs: a "Buy" section and a "Checkout". The first allows you to select different items and then move them into the "Checkout" using a button for each row. My problem is that i'm unsure how to move each selected row across to the second div (checkout).
Eg:
<!-- Shop Buy -->
<div id="buy">
<h3>Purchase</h3>
<table id="buyTable">
<th>Level Required</th><th>Item</th><th>Cost</th>
<tr><td>Level 1</td><td><img src="img/shop/pickaxe_rusty.png" id="item1"></td><td>50 Gold</td><td class="moveToCheckout">⇒</td></tr>
<tr><td>Level 10</td><td><img src="img/shop/pickaxe_iron.png" id="item2"></td><td>500 Gold</td><td class="moveToCheckout">⇒</td></tr>
<tr><td>Level 25</td><td><img src="img/shop/pickaxe_steel.png" id="item3"></td><td>5000 Gold</td><td class="moveToCheckout">⇒</td></tr>
</table>
</div>
The <td class="moveToCheckout">⇒</td>or ⇒ is what the user will click on to move the items across.
<!-- Shop Checkout -->
<div id="checkout">
<h3>Checkout</h3>
<table>
<th>Items</th><th>Quantity</th><th>Price</th>
<tr><td><img src="" id=""></td><td><input type="text" value="1" id="quantity"><td>X Gold</td></td></tr>
</table>
<div id="checkoutBoxes">
<span id="checkoutYes">✔</span>
<span id="checkoutNo">✘</span>
</div>
</div>
Additional info:
I have an array for each item with all the info for it (cost, level, img src), would it be possible to use this to create a new row in the checkout section and insert the details into it using a for loop?

I don't exactly understand what you want, but something like this should look close enough :
function buy(elem) {
$(elem).parents('tr').appendTo("#co-table");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Shop Buy -->
<div id="buy">
<h3>Purchase</h3>
<table id="buyTable">
<tr>
<th>Level Required</th>
<th>Item</th>
<th>Cost</th>
</tr>
<tr>
<td>Level 1</td>
<td>
<img src="img/shop/pickaxe_rusty.png" id="item1">
</td>
<td>50 Gold
<button onclick="buy(this)">Buy</button>
</td>
</tr>
<tr>
<td>Level 10</td>
<td>
<img src="img/shop/pickaxe_iron.png" id="item2">
</td>
<td>500 Gold
<button onclick="buy(this)">Buy</button>
</td>
</tr>
<tr>
<td>Level 25</td>
<td>
<img src="img/shop/pickaxe_steel.png" id="item3">
</td>
<td>5000 Gold
<button onclick="buy(this)">Buy</button>
</td>
</tr>
</table>
</div>
<!-- Shop Checkout -->
<div id="checkout">
<h3>Checkout</h3>
<table id="co-table">
<tr>
<th>Items</th>
<th>Quantity</th>
<th>Price</th>
</tr>
<tr>
<td>
<img src="" id="">
</td>
<td>X Gold</td>
<td>
<input type="text" value="1" id="quantity">
</td>
</tr>
</table>
<div id="checkoutBoxes">
<span id="checkoutYes">✔</span>
<span id="checkoutNo">✘</span>
</div>
</div>

Related

table inside hidden div becomes visible upon appending tr dynamically

$("#zz").click(function() {
$(this).closest("tr").after("<tr><td colspan='2'></td><td colspan='7'>" + $(this).next().html() + "</td></tr>");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<body>
<table>
<tr>
<td>
<button id="zz" >zz</button>
<div id="data_hidden" style="display:none">
<table>
<tr>
<td>
Hidden data appears
</td>
</tr>
</table>
</div>
</td>
<td>
1
</td>
<td>
2
</td>
<td>
3
</td>
</tr>
<tr>
<td>
4
<td>
<td>
5
<td>
<td>
6
<td>
</tr>
</table>
</body>
</html>
<tr role="row" class="odd">
<td class="sorting_1">
<img class="plus" id="plus" src="../Images/plus.png" style="width: 2em;">
<div style="display:none">
<table>
<thead class="bg-blue">
<tr>
<th></th>
<th>Established On</th>
<th>Objective</th>
<th>Target Value</th>
<th>Baseline Value</th>
<th>Monitorng mechanism</th>
<th>Target Date</th>
<th>Action Plan</th>
<th>Frequency of Evaluation</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<img class="add" id="add" src="/Images/add.png" style="width: 2em;">
<div style="display:none">
<table>
<thead class="bg-blue">
<tr>
<th>
Objective Evaluated On
</th>
<th>
Objective Measured Value
</th>
<th>
From Period
</th>
<th>
To Period
</th>
<th>
Trend
</th>
<th>
NCR Ref. (If Objective not achieved)
</th>
<th>
Status of Objective Evaluation
</th>
<th>
Objective Evidence
</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="8">
<div style="text-align: center;">
<h4 style="color: grey;">No data exists</h4>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
<td>
09/07/2019 </td>
<td> ww</td>
<td> ww</td>
<td> ww</td>
<td> ww</td>
<td>
09/07/2019 </td>
<td>
<p>Not Available</p>
</td>
<td> Annually</td>
</tr>
</tbody>
</table>
</div>
</td>
<td>
1
</td>
<td>
<a data-toggle="popover" data-trigger="hover" href="/Objectives/ObjectivesDetails?Objectives_Id=3" id="3" onclick="HyperLinkProgressIconFunction()" data-original-title="" title="">ee</a>
</td>
<td>
2019
</td>
<td>
Department
</td>
<td>
HR DEPARTMENT
</td>
<td>
Shilpa jay bhat,Lavita p Pereira,chandramouli b cc
</td>
<td>
Approved
</td>
<td>
<span class="badge badge-info">No File attached</span>
</td>
<td>
<a href="/Objectives/ObjectivesEdit?Objectives_Id=3" title="Edit Objective details" onclick="HyperLinkProgressIconFunction()">
<span class="badge badge-info">Edit</span>
</a>
</td>
<td>
<span class="badge badge-danger" title="Delete Internal Document" onclick="DeleteItems(3)" style="cursor:pointer;">Delete</span>
</td>
</tr>
The above is just an example of a row from my table.
Upon appending $(this).closest("tr").after("<tr><td colspan='2'></td><td colspan='9'>" + $(this).next().html() + "</td></tr>"); on a button click the table becomes visible in the new <tr>
To my extend my knowledge , apparently it's been appended directly to tr since the display is set to none, does the dom elements work like this ?
I'm novice at the most, when it comes to html.
Can Anyone please explain why this happens ?
Any relevant information will greatly appreciated.
Your selection (using html()) returns the contents of the element, not the element itself, so any attributes on the element are also disregarded. One easy fix might be to move your hide styles down a level:
<div id="data_hidden">
<table style="display:none">
<tr>
<td>
Hidden data appears
</td>
</tr>
</table>
</div>
Demo 1
This leaves the original div element in the DOM, but it doesn't affect appearance.
Alternatively, grab the outerHTML of the selection's raw element:
$(this).closest("tr").after("<tr><td colspan='2'></td><td colspan='7'>"
+ $(this).next().get(0).outerHTML + "</td></tr>");
});
Demo 2

show loading/progress/spinner on table during loading data

There is a table which is populated by ng_repeat, I am going to show a loading/progress/spinner on it while data is loading
<div class="panel-body panel-success">
<div class="col-lg-12">
<table class="table table-bordered" >
<tr>
<th>Name</th>
<th>Family</th>
<th>Age</th>
</tr>
<tr ng-repeat="r in results track by r.ID">
<td>
{{r.Name}}
</td>
<td>
{{r.Family}}
</td>
<td>
{{r.Gender}}
</td>
</tr>
<tfoot>
<tr>
<td align="center" colspan="8">
<div class="pull-center">
<ul uib-pagination total-items="totalCount" ng-change="pageChanged()"
items-per-page="pageSizeSelected"
direction-links="true" ng-model="pageIndex"
max-size="maxSize"
class="pagination"
boundary-links="true"
rotate="false" num-pages="numPages"></ul>
</div>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
How can show loading/progress/spinner inside table dusring loading data? I want to show spinner inside table (Instead of rows, I mean keep table column name)
Show spinner while data is not loaded... once loaded, hide it !!
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="soQuestion">
<div class="panel-body panel-success" ng-controller="soController">
{{results.length}}
<div class="col-lg-12">
<table class="table table-bordered">
<tr>
<th>Name</th>
<th>Family</th>
<th>Age</th>
</tr>
<tr ng-if="results.length<1">
<td>
//insert the spinner image here
</td>
<td>
//insert the spinner image here
</td>
<td>
//insert the spinner image here
</td>
</tr>
<ng-container ng-if="results.length>0">
<tr ng-repeat="r in results track by r.ID">
<td>
{{r.Name}}
</td>
<td>
{{r.Family}}
</td>
<td>
{{r.Gender}}
</td>
</tr>
</ng-container>
<tfoot>
<tr>
<td align="center" colspan="8">
<div class="pull-center">
<ul uib-pagination total-items="totalCount" ng-change="pageChanged()" items-per-page="pageSizeSelected" direction-links="true" ng-model="pageIndex" max-size="maxSize" class="pagination" boundary-links="true" rotate="false" num-pages="numPages"></ul>
</div>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
</div>

HTML panel to appear/disappear depending on DataTables Select

Im using datatables responsive/select right now to display some data. How would I go about making it so when I click on any of these rows in the table, it opens up the "col-md-6" panel? So hidden when no rows are selected, then shown when a row is selected.
<!-- begin row -->
<div class="row">
<!-- begin col-2 -->
<div class="col-md-2">
<div id="menu-panel"></div>
<!-- begin panel -->
<div class="panel panel-inverse">
<div class="panel-heading">
<div class="panel-heading-btn">
<i class="fa fa-expand"></i>
</div>
<h4 class="panel-title">Digital Inputs</h4>
</div>
<div class="alert alert-info fade in">
<button type="button" class="close" data-dismiss="alert">
<span aria-hidden="true">×</span>
</button>
Click on a Digital Input to edit its properties.
</div>
<div class="panel-body">
<table id="data-table" class="table table-striped table-bordered nowrap" width="100%">
<thead>
<tr>
<th>Input</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr class="gradeA">
<td>1</td>
<td>Digital Input 1</td>
</tr>
<tr class="gradeA">
<td>2</td>
<td>Digital Input 2</td>
</tr>
<tr class="gradeA">
<td>3</td>
<td>Digital Input 3</td>
</tr>
<tr class="gradeA">
<td>4</td>
<td>Digital Input 4</td>
</tr>
<tr class="gradeA">
<td>5</td>
<td>Digital Input 5</td>
</tr>
<tr class="gradeA">
<td>6</td>
<td>Digital Input 6</td>
</tr>
<tr class="gradeA">
<td>7</td>
<td>Digital Input 7</td>
</tr>
<tr class="gradeA">
<td>8</td>
<td>Digital Input 8</td>
</tr>
<tr class="gradeA">
<td>9</td>
<td>Digital Input 9</td>
</tr>
<tr class="gradeA">
<td>10</td>
<td>Digital Input 10</td>
</tr>
<tr class="gradeA">
<td>11</td>
<td>Digital Input 11</td>
</tr>
<tr class="gradeA">
<td>12</td>
<td>Digital Input 12</td>
</tr>
<tr class="gradeA">
<td>13</td>
<td>Digital Input 13</td>
</tr>
<tr class="gradeA">
<td>14</td>
<td>Digital Input 14</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- end panel -->
</div>
<!-- begin col-2 -->
<div class="col-md-6">
<!-- begin panel -->
<div class="panel panel-inverse" data-sortable-id="form-stuff-2">
<div class="panel-heading">
<div class="panel-heading-btn">
<i class="fa fa-expand"></i>
</div>
<h4 class="panel-title">New RTU FZB-1000 - FZB-1000</h4>
</div>
<div class="panel-body">
<form class="form-horizontal" action="/" method="POST">
<legend>Digital Input Basic Settings</legend>
<div class="form-group">
<label class="col-md-4 control-label">Digital Input:</label>
<div class="col-md-8">
<input type="text" class="form-control" placeholder="1" disabled />
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Display Input:</label>
<div class="col-md-2">
<input type="checkbox" name="" value="" checked><br>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Signal Name:</label>
<div class="col-md-8">
<input type="device" class="form-control" value="Digital Input 1" />
</div>
</div>
</div>
</div>
<!-- end panel -->
<div class="col-md-8 col-md-offset-4">
<button type="submit" class="btn btn-sm btn-primary m-r-5">Save</button>
<button type="submit" class="btn btn-sm btn-default">Cancel</button>
</div>
</div>
<!-- end col-10 -->
</div>
<!-- end row -->
App.restartGlobalFunction();
App.setPageTitle('Color Admin | Managed Tables - Select');
$.getScript('assets/plugins/DataTables/media/js/jquery.dataTables.js').done(function() {
$.getScript('assets/plugins/DataTables/media/js/dataTables.bootstrap.min.js').done(function() {
$.getScript('assets/plugins/DataTables/extensions/Select/js/dataTables.select.min.js').done(function() {
$.getScript('assets/plugins/DataTables/extensions/Responsive/js/dataTables.responsive.min.js').done(function() {
$.getScript('assets/js/table-manage-select.demo.min.js').done(function() {
TableManageTableSelect.init();
});
});
});
});
});
You can do something like this.. give your input field id for example
digital input: id="digital-input-number" and for digital signal id="digital-input-name" and here goes the code...
$('.gradeA td').on('click',function(){
var text=[];
text = $(this).parent().find('td');
//console.log(text[0].innerText);
// console.log(text[1].innerText);
$("#digital-input-number").val(text[0].innerText);
$("#digital-input-name").val(text[1].innerText);
});
this code will put the value of your table to form dynamically i.e you click on one row data of that row goes to the form which i suppose you want to see.
I don't see any JS, you should attempt this yourself. What I can say is that in order to get what you need, you will have to call the inputs and according to which column is selected on the table, place those values equal to what is selected.
So, if you click on Digital Input 1, set the value for Digital Input to the row selected but the first column. It will display the value of 1.
Then you just need to call the value of the selected column to the signal name and it will display Digital Input 1.
None of your elements have id tags.
In order to do this, your rows and columns will need to have id tags. Then you can easily grab the innerHTML of the id using JS.
I hope this helps.

How to insert a scroll bar to a dev class

I want to add a scroll bar to the drop-down list of my code.It is actually a cart which shows the items in the cart when I click on the cart. I want to put a scroll bar to it to go down and see the items on it as the drop down box has a fixed size.
The code I used for the cart is:
<ul id="cart-dropdown" class="box-dropdown parent-arrow">
<li>
<div class="box-wrapper parent-border">
<p>Recently added item(s)</p>
<table class="cart-table">
<tr>
<td><img src="img/products/sample1.jpg" alt="product"></td>
<td>
<h6>Lorem ipsum dolor</h6>
<p>Product code PSBJ3</p>
</td>
<td>
<span class="quantity"><span class="light">1 x</span> $79.00</span>
Remove
</td>
</tr>
<tr>
<td><img src="img/products/sample1.jpg" alt="product"></td>
<td>
<h6>Lorem ipsum dolor</h6>
<p>Product code PSBJ3</p>
</td>
<td>
<span class="quantity"><span class="light">1 x</span> $79.00</span>
Remove
</td>
</tr>
<tr>
<td><img src="img/products/sample1.jpg" alt="product"></td>
<td>
<h6>Lorem ipsum dolor</h6>
<p>Product code PSBJ3</p>
</td>
<td>
<span class="quantity"><span class="light">1 x</span> $79.00</span>
Remove
</td>
</tr>
</table>
<br class="clearfix">
</div>
<div class="footer">
<table class="checkout-table pull-right">
<tr>
<td class="align-right">Tax:</td>
<td>$0.00</td>
</tr>
<tr>
<td class="align-right">Discount:</td>
<td>$37.00</td>
</tr>
<tr>
<td class="align-right"><strong>Total:</strong></td>
<td><strong class="parent-color">$999.00</strong></td>
</tr>
</table>
</div>
<div class="box-wrapper no-border">
<a class="button pull-right parent-background" href="#">Checkout</a>
<a class="button pull-right" href="order_info.html">View Cart</a>
</div>
</li>
</ul>
Have you tried adding overflow:scroll to your element's CSS?
You wants something like this ?
See this fiddle
#cart-dropdown { height: 300px; overflow-y: scroll;}

How to select visible element using XPath or CSS?

I want to select the apply button in the following code. There are two buttons and only one button is visible.
//input[#value='Apply' and #id='btn' and #name='btn' and not(ancestor::td[contains(#style,'display:none')])]
I have written above XPath to select the visible one but in web driver it says unable to access the element. (browser - IE8)
<table class="ColumnTable" cellspacing="0">
<tbody>
<tr>
<td>
<div id="dashboard~120" class="Section" style="" headeron="" minimized="false" rendered="false">
<table class="SectionT" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style=" display:none;">
<div id="dashboard~Contents" style="">
<table style="width:100%">
<tbody>
<tr height="100%">
<td class="EItem" valign="TOP" align="CENTER" colspan="2" style="">
<div id="EmbedViewd" reloadinline="">
<div id="NavDone" style="display:;">
<div id="Result" result="Prompt">
<table class="ViewTable" cellspacing="0">
<tbody>
<tr>
<td>
<div id="newLayout">
<form style="margin: 0;" method="post" action="javascript:void(null);">
<div style="">
<table class="PromptView" style="">
<tbody>
<tr>
<td class="ButtonsCell">
<input id="btn" class="button" type="button" tabindex="0" value="Apply" name="btn" style="background-color: rgb(240, 240, 240);">
</td>
</tr>
</tbody>
</table>
</div>
</form>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr>
<td>
<div id="dashboard~121" class="Section" style="" headeron="true" minimized="false" rendered="false">
<table class="SectionT" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>
<div id="dashboard~Contents" style="">
<table class="SectionTD" style="width:100%; border-top:none;">
<tbody>
<tr height="100%">
<td class="EItem" valign="TOP" align="CENTER" colspan="2" style="">
<div id="EmbedViewd" reloadinline="">
<div id="NavDone" style="display:;">
<div id="Result" result="Prompt">
<table class="ViewTable" cellspacing="0">
<tbody>
<tr>
<td>
<div id="newLayout">
<form style="margin: 0;" method="post" action="javascript:void(null);">
<div style="">
<table class="PromptView" style="">
<tbody>
<tr>
<td class="ButtonsCell">
<input id="btn" class="button" type="button" tabindex="0" value="Apply" name="btn" style="background-color: rgb(240, 240, 240);">
</td>
</tr>
</tbody>
</table>
</div>
</form>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
My question is there anyway other work around for this issue. I think there are plenty of ways to write the above xpath am i right?
You could try the following in case this is a Selenium issue:
//input[#value='Apply'][#id='btn'][#name='btn']
[not(ancestor::td[contains(#style,'display:none')])]
It's the same expression with the same result, but as mentioned here Xpath does not work with Selenium it's possible that Selenium has an issue with evaluating and in XPath.
Another issue I just want to mention is that you shoudn't use the same id for multiple elements, ids should be unique. Otherwise your HTML is not valid. When you change the ids to unique values, it'd be possible to reduce the XPath match conditions.
Selecting an element using xpath:
Selecting the first element:
//div[#id='dashboard~120']descendant::input[#id='btn'].Click;
Selecting the second element:
//div[#id='dashboard~121']descendant::input[#id='btn'].Click;

Categories