Show/hide cascading tr using angularjs - javascript

I am trying to show/hide on button click.
I tried,
<tr>
<td colspan="2">
<button ng-click="visible = true">Calibration</button>
</td>
<td colspan="2"> Offsset
</td>
<td colspan="3" > Multiplier
</td>
</tr>
<tr ng-if="visible" >
<td colspan="5">
True value:
</td>
<td colspan="2">
<button ng-click="visible = false">Cancel</button>
<button ng-click="visible1 = true">OK</button>
</td>
</tr>
<tr ng-if="visible1" >
<td colspan="5" >
True value: <input type="text" name="val1" id="val1" style="width:50%"/>
</td>
<td colspan="2">
<button ng-click="visible1 = false" >Cancel</button>
<button> OK </button>
</td>
</tr>
controller is like,
$scope.visible = false;
$scope.visible1 = false;
issue is that calibration button works.But another ok cancel buttons are not working.


use ng-show in place of ng-if
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<table>
<tr>
<td colspan="2">
<button ng-click="visible = true">Calibration</button>
</td>
<td colspan="2"> Offsset
</td>
<td colspan="3" > Multiplier
</td>
</tr>
<tr ng-show="visible" >
<td colspan="5">
True value:
</td>
<td colspan="2">
<div>
<button ng-click="visible = false">Cancel</button>
<button ng-click="visible1 = true">OK</button>
</div>
</td>
</tr>
<tr ng-show="visible1" >
<td colspan="5" >
True value: <input type="text" name="val1" id="val1" style="width:50%"/>
</td>
<td colspan="2">
<button ng-click="visible1 = false" >Cancel</button>
<button> OK </button>
</td>
</tr>
</table>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.visible = false;
$scope.visible1 = false;
});
</script>
<p>Use the ng-bind directive to bind the innerHTML of an element to a property in the data model.</p>
</body>
</html>

Related

Filtering data in columns from options use jQuery

I work with filtering, and i have issues, i have 4 option input in which i have some data which i need to filter in table, for now i filter data only for one column, but problem is if i will add one more filter, script will not work, and filter data from the last selected value. But i need if i have 2-4 selected values in option data is filtering.
My code:
JS:
$("#cancelFilters").hide();
$('#filterButton').click(function () {
getSelectedVal()
filterData()
filters = [];
$("#cancelFilters").fadeIn();
});
var filters = [];
function getSelectedVal() {
var materialCode = $('#materialCode option:selected').text()
var plantCode = $('#plantCode option:selected').text()
var vsCode = $('#vsCode option:selected').text()
var status = $('#statusCode option:selected').text()
applyFilter(materialCode, 1)
applyFilter(plantCode, 2)
applyFilter(vsCode, 3)
applyFilter(status, 4)
}
function applyFilter(value, id) {
if (value)
filters.push('.column' + id + ':contains(' + value + ')');
}
function filterData() {
if (filters.length > 0) {
var rows = $("#orderListData").find("tr").hide();
filters.forEach(filter => {
$("#orderListData td" + filter).parent().show();
})
}
}
$('#cancelFilters').click(function () {
var $rows = $('#orderListData tr');
$rows.show()
$("#cancelFilters").fadeOut();
});
JSFIddle - https://jsfiddle.net/qunzorez/k3ygL07f/11/
So if in options number 3 u will chosse 023 and tap add filters it's will work, but if i chosse 023 and options number 4 BOOKED it's will filter only booked status, where is problem?

By doing $("#orderListData td" + filter).parent().show() on every filter, you are essentially showing every row that matches EVEN ONE of the filters. While you have to show only those rows which can satisfy ALL filters.
So instead of looping through filters and checking if any td element satisfies it, loop through the rows and check if it satisfies every filter.
Use this code to do so ( Only the filterData function is changed )
$("#cancelFilters").hide();
$('#filterButton').click(function () {
getSelectedVal()
filterData()
filters = [];
$("#cancelFilters").fadeIn();
});
var filters = [];
function getSelectedVal() {
var materialCode = $('#materialCode option:selected').text()
var plantCode = $('#plantCode option:selected').text()
var vsCode = $('#vsCode option:selected').text()
var status = $('#statusCode option:selected').text()
applyFilter(materialCode, 1)
applyFilter(plantCode, 2)
applyFilter(vsCode, 3)
applyFilter(status, 4)
}
function applyFilter(value, id) {
if (value)
filters.push('.column' + id + ':contains(' + value + ')');
}
function filterData() {
if (filters.length > 0) {
var rows = $("#orderListData").find("tr");
rows.hide();
//Check if any row satisfy all filters
$.each(rows, (i, row) => {
if (filters.every(filter => $(row).find(filter).length)) {
$(row).show();
}
})
}
}
$('#cancelFilters').click(function () {
var $rows = $('#orderListData tr');
$rows.show()
$("#cancelFilters").fadeOut();
});
.row {
width: 100%;
display: flex;
flex-wrap: wrap;
}
.row::after {
display: table;
clear: both;
content: "";
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="col-3"> <input class="form-control" type="text" id="search" placeholder="Search for ...""></div>
<div class=" col-2">
<select class="form-control secondary-select" id="materialCode">
<option></option>
<option>16014344C</option>
<option>16016398A</option>
<option>16009838A</option>
</select>
<p><strong>Material Code</strong></p>
</div>
<div class="col-2">
<select class="form-control secondary-select" id="plantCode">
<option></option>
<option>0119</option>
<option>0379</option>
</select>
<p><strong>Plant Code</strong></p>
</div>
<div class="col-2">
<select class="form-control secondary-select" id="vsCode">
<option></option>
<option>023</option>
<option>0379</option>
</select>
<p><strong>Value Stream Code</strong></p>
</div>
<div class="col-2">
<select class="form-control secondary-select" id="statusCode">
<option></option>
<option>BOOKED</option>
<option>RELEASED</option>
</select>
<p><strong>Status</strong></p>
</div>
<div class="col-1">
<button id="filterButton" class="button button-clear butt-heith">
Apply filters
</button>
</div>
</div>
<button id="cancelFilters" class="button button-deactivate float-right">
Cancel filters
</button>
<table class="table-editor" id="ordersList">
<thead>
<tr>
<th>Production order code</th>
<th>Material code</th>
<th>Target quantity</th>
<th>Plant code</th>
<th>Value stream code</th>
<th>Status</th>
<th>Release date</th>
<th>Activation date</th>
<th>Booking date</th>
<th>TPT (d)</th>
</tr>
</thead>
<tbody id="orderListData">
<tr>
<td>
14298947
</td>
<td class="column1">
11027174A
</td>
<td>
1
</td>
<td class="column2">
</td>
<td class="column3">
023
</td>
<td class="column4">
BOOKED
</td>
<td>
2020-03-02 06:57:42
</td>
<td></td>
<td>
2020-03-02 08:12:22
</td>
<td>
0.1 </td>
</tr>
<tr>
<td>
80150671
</td>
<td class="column1">
11019682A
</td>
<td>
800
</td>
<td class="column2">
</td>
<td class="column3">
023
</td>
<td class="column4">
BOOKED
</td>
<td>
2020-03-02 08:02:32
</td>
<td></td>
<td>
2020-03-02 15:30:51
</td>
<td>
0.3 </td>
</tr>
<tr>
<td>
80150672
</td>
<td class="column1">
15000987A
</td>
<td>
503
</td>
<td class="column2">
</td>
<td class="column3">
</td>
<td class="column4">
BOOKED
</td>
<td>
2020-03-02 08:28:04
</td>
<td></td>
<td>
2020-03-13 00:00:00
</td>
<td>
10.6 </td>
</tr>
<tr>
<td>
80150673
</td>
<td class="column1">
11011572E
</td>
<td>
153
</td>
<td class="column2">
</td>
<td class="column3">
023
</td>
<td class="column4">
BOOKED
</td>
<td>
2020-03-02 08:30:32
</td>
<td></td>
<td>
2020-03-06 00:00:00
</td>
<td>
3.6 </td>
</tr>
<tr>
<td>
80150674
</td>
<td class="column1">
18300753C
</td>
<td>
153
</td>
<td class="column2">
</td>
<td class="column3">
</td>
<td class="column4">
BOOKED
</td>
<td>
2020-03-02 08:30:57
</td>
<td></td>
<td>
2020-03-10 00:00:00
</td>
<td>
7.6 </td>
</tr>
<tr>
<td>
80150675
</td>
<td class="column1">
11014966C
</td>
<td>
153
</td>
<td class="column2">
</td>
<td class="column3">
023
</td>
<td class="column4">
RELEASED
</td>
<td>
2020-03-02 08:31:26
</td>
<td></td>
<td></td>
<td>
</td>
</tr>
<tr>
<td>
80150676
</td>
<td class="column1">
11014264D
</td>
<td>
79
</td>
<td class="column2">
</td>
<td class="column3">
</td>
<td class="column4">
BOOKED
</td>
<td>
2020-03-02 08:33:48
</td>
<td></td>
<td>
2020-03-06 00:00:00
</td>
<td>
3.6 </td>
</tr>
<tr>
<td>
80150677
</td>
<td class="column1">
18300753C
</td>
<td>
79
</td>
<td class="column2">
</td>
<td class="column3">
023
</td>
<td class="column4">
BOOKED
</td>
<td>
2020-03-02 08:34:16
</td>
<td></td>
<td>
2020-03-10 00:00:00
</td>
<td>
7.6 </td>
</tr>
<tr>
<td>
80150678
</td>
<td class="column1">
11020109B
</td>
<td>
79
</td>
<td class="column2">
</td>
<td class="column3">
</td>
<td class="column4">
RELEASED
</td>
<td>
2020-03-02 08:34:38
</td>
<td></td>
<td></td>
<td>
</td>
</tr>
<tr>
<td>
80150679
</td>
<td class="column1">
15001454B
</td>
<td>
100
</td>
<td class="column2">
</td>
<td class="column3">
023
</td>
<td class="column4">
BOOKED
</td>
<td>
2020-03-02 08:37:59
</td>
<td></td>
<td>
2020-03-12 00:00:00
</td>
<td>
9.6 </td>
</tr>
</tbody>
</table>

Using javascript to calculate the total cost of an order based on quantity of products in html form

Trying to use javascript to calculate the total cost of an order using the quantity inputted through the form in html but the total is not displaying in the input box. Been messing around with it for a few days and yesterday was showing NaN but now the box stays completely blank. It's all within a singlular webpage as a pratical assessment for school and am just using the script tag.
See the js below
function calculatePrice()
{
//select data
var cappuccino = 3.00;
var espresso = 2.25;
var latte = 2.50;
var iced = 2.50;
var quantityCappuccino = document.getElementByID("quantityCappuccino").value;
var quantityEspresso = document.getElementByID("quantityEspresso").value;
var quantityLatte = document.getElementByID("quantityLatte").value;
var quantityIced = document.getElementByID("quantityIced").value;
//calculate final cost
var total = (quantityCappuccino * cappuccino) + (quantityEspresso * espresso) + (quantityLatte * latte) + (quantityIced * iced);
//print value to orderTotal
document.getElementById("orderTotal").value=total;
}
And here is the html for the form
<table>
<tr align="center">
<td><hr>
Hot Drinks<hr>
</td>
<td><hr>
Price<hr>
</td>
<td><hr>
Quantity<hr>
</td>
</tr>
<form name="calcuccino">
<tr>
<td>
Cappuccino
</td>
<td align="center">
$3.00
</td>
<td align="center">
<input type="number" id="quantityCappucino" name="quantityCappuccino" value="0">
</td>
</tr>
<tr>
<td>
Espresso
</td>
<td align="center">
$2.25
</td>
<td align="center">
<input type="number" id="quantityEspresso" name="quantityEspresso" value="0">
</td>
</tr>
<tr>
<td>
Latte
</td>
<td align="center">
$2.50
</td>
<td align="center">
<input type="number" id="quantityLatte" name="quantityLatte" value="0">
</td>
</tr>
<tr>
<td>
Iced
</td>
<td align="center">
$2.50
</td>
<td align="center">
<input type="number" id="quantityIced" name="quantityIced" value="0">
</td>
</tr>
<tr>
<td>
<hr>
<input type="checkbox" id="takeaway" name="takeaway">Takeaway?</option>
</td>
</tr>
<tr>
<td>
<br>
<button type="button" onclick="calculatePrice()">Submit Order</button>
</td>
<td>
</td>
<td>
<br>
<hr>
Order total: <b>$</b>
<input type="text" name="orderTotal" id="orderTotal" Size=6 readonly>

I found two errors:
(1) In your second four var statements, it's getElementById not getElementByID (don't all-cap "Id").
(2) Your first <input> tag has the id name misspelled. It should be quantityCappuccino (identical to the name attribute).
After fixing those, the code worked like a charm.
NOTE: It took me seconds to figure this out because the error console (In FireFox, strike the F12 key to open it) reported the problems. That console is your friend.

Try this !
$("#orderTotal").click(function () {
calculatePrice();
});
function calculatePrice()
{
//select data
var cappuccino = 3.00;
var espresso = 2.25;
var latte = 2.50;
var iced = 2.50;
var quantityCappuccino = $("#quantityCappucino").val();
var quantityEspresso = $("#quantityEspresso").val();
var quantityLatte = $("#quantityLatte").val();
var quantityIced = $("#quantityIced").val();
//calculate final cost
var total = (quantityCappuccino * cappuccino) + (quantityEspresso * espresso) + (quantityLatte * latte) + (quantityIced * iced);
console.log(total);
//print value to orderTotal
$("#orderTotal").val(total);
}
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<table>
<tr align="center">
<td><hr>
Hot Drinks<hr>
</td>
<td><hr>
Price<hr>
</td>
<td><hr>
Quantity<hr>
</td>
</tr>
<form name="calcuccino">
<tr>
<td>
Cappuccino
</td>
<td align="center">
$3.00
</td>
<td align="center">
<input type="number" id="quantityCappucino" name="quantityCappuccino" value="0">
</td>
</tr>
<tr>
<td>
Espresso
</td>
<td align="center">
$2.25
</td>
<td align="center">
<input type="number" id="quantityEspresso" name="quantityEspresso" value="0">
</td>
</tr>
<tr>
<td>
Latte
</td>
<td align="center">
$2.50
</td>
<td align="center">
<input type="number" id="quantityLatte" name="quantityLatte" value="0">
</td>
</tr>
<tr>
<td>
Iced
</td>
<td align="center">
$2.50
</td>
<td align="center">
<input type="number" id="quantityIced" name="quantityIced" value="0">
</td>
</tr>
<tr>
<td>
<hr>
<input type="checkbox" id="takeaway" name="takeaway">Takeaway?</option>
</td>
</tr>
<tr>
<td>
<br>
<button type="button" onclick="calculatePrice()">Submit Order</button>
</td>
<td>
</td>
<td>
<br>
<hr>
Order total: <b>$</b>
<input type="text" name="orderTotal" id="orderTotal" Size=6 readonly>
</td>
</tr>
</form>
</table>
</body>
</html>

Unable to dynamically calculate an input value onchange

I have been trying to get this calculator to work in my WordPress blog but haven't been successful at it.
I did get simple Hello world pop-up to work but not this. I want to calculate the "BPodds". Can you guys tell me what's wrong with this?
function calcStake() {
var BWodds = document.getElementById('BWodds').value;
var div = document.getElementById('div').value;
var BPodds = ((BWodds - 1) / div) + 1;
document.getElementById('BPodds').innerHTML = BPodds;
}
<table class="table" border="0" width="500" cellspacing="1" cellpadding="3">
<tbody>
<tr class="calcheading">
<td colspan="3"><strong>Each Way Lay Calculator</strong>
</td>
</tr>
<tr class="calchead">
<td align="center">Bookmaker Win odds:</td>
<td align="center">Place divider:</td>
<td align="center">Bookmaker Place odds:</td>
</tr>
<tr class="calcrow">
<td align="center">
<input id="BWodds" type="text" value="10" onchange="calcStake()" />
</td>
<td align="center">
<input id="div" type="text" value="4" onchange="calcStake()" />
</td>
<td align="center">
<input id="BPodds" />
</td>
</tr>
</tbody>
</table>

You should use value instead of innerHtml:
document.getElementById('BPodds').value = BPodds;
Here is the fiddle: http://jsfiddle.net/o5ze12mf/

The problem is not with Wordpress,
You are trying to put the result in INPUT with innerHTML but to change the value of INPUT you need to use .value
You code will be like this :
<script type="text/javascript">
function calcStake() {
var BWodds = document.getElementById('BWodds').value;
var div = document.getElementById('div').value;
var BPodds = ((BWodds - 1) / div) + 1;
document.getElementById('BPodds').value = BPodds;
}
</script>
<table class="table" border="0" width="500" cellspacing="1" cellpadding="3">
<tbody>
<tr class="calcheading">
<td colspan="3"><strong>Each Way Lay Calculator</strong></td>
</tr>
<tr class="calchead">
<td align="center">Bookmaker Win odds:</td>
<td align="center">Place divider:</td>
<td align="center">Bookmaker Place odds:</td>
</tr>
<tr class="calcrow">
<td align="center">
<input id="BWodds" type="text" value="10" onchange="calcStake()" />
</td>
<td align="center">
<input id="div" type="text" value="4" onchange="calcStake()" />
</td>
<td align="center">
<input id="BPodds" />
</td>
</tr>
</tbody>
</table>
I just changed
document.getElementById('BPodds').innerHTML = BPodds;
to
document.getElementById('BPodds').value = BPodds;

Make the JavaScript link hide onClick

I have a form page and certain items only appear on the list if a link is clicked on. I want the link to hide when it is clicked on and the action it calls un-hides.
This is my test page:
function toggle_it(itemID) {
// Toggle visibility between none and ''
if ((document.getElementById(itemID).style.display == 'none')) {
document.getElementById(itemID).style.display = ''
event.preventDefault()
} else {
document.getElementById(itemID).style.display = 'none';
event.preventDefault()
}
}
<table width="500" border="1" cellpadding="3">
<cfform action="" method="POST">
<tr>
<td align="center"><strong>ID</strong>
</td>
<td align="center"><strong>DESCRIPTION</strong>
</td>
<td align="center">
<strong>SAY IT</strong>
</td>
</tr>
<tr>
<td align="center">a</td>
<td>
The field with no name
</td>
<td>
<cfinput type="Text" name="aaa" value="">
</td>
</tr>
<tr id="tr1" style="display:none">
<td align="center">a1</td>
<td>Add-on1</td>
<td>
<cfinput type="Text" name="a1" value="Add-on1">
</td>
</tr>
<tr id="tr2" style="display:none">
<td align="center">a2</td>
<td>Add-on2</td>
<td>
<cfinput type="Text" name="a2" value="Add-on2">
</td>
</tr>
<tr id="tr3" style="display:none">
<td align="center">a3</td>
<td>Add-on - Daily1</td>
<td>
<cfinput type="Text" name="a1d" value="Add-on - Daily1">
</td>
</tr>
<tr id="tr4" style="display:none">
<td align="center">a4</td>
<td>Add-on - Daily2</td>
<td>
<cfinput type="Text" name="a2d" value="Add-on - Daily2">
</td>
</tr>
<tr>
<td colspan=3>
<input type="submit" name="Submit" value="Submit">
</td>
</tr>
</cfform>
</table>
<!--- ----------------------------------------------------------------- --->
<table border="0">
<tr>
<td align="right">Add-on1: </td>
<td>Add-on1
</td>
</tr>
<tr>
<td align="right">Add-on2: </td>
<td>Add-on2
</td>
</tr>
<tr>
<td align="right">Add-on3 - Daily1: </td>
<td>Add-on - Daily1
</td>
</tr>
<tr>
<td align="right">Add-on4 - Daily2: </td>
<td>Add-on - Daily2
</td>
</tr>
</table>
The code is in CF but this is a JavaScript function.
BTW. Thank you whoever wrote the original script I found on Stackoverflow a while back.

Plunker
Description: Gave html elements for toggle unique ids. Also needed to update the javascript to get the parent element of the parent element of the link clicked. This only works when there are two elements to reach the tr.
Importantly, this code has an extra unhide that isn't needed...since we are hiding it and there is nothing to click.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<table width="500" border="1" cellpadding="3">
<cfform action="" method="POST">
<tr>
<td align="center"><strong>ID</strong></td>
<td align="center"><strong>DESCRIPTION</strong></td>
<td align="center">
<strong>SAY IT</strong>
</td>
</tr>
<tr>
<td align="center">a</td>
<td>
The field with no name
</td>
<td>
<cfinput type="Text" name="aaa" value="">
</td>
</tr>
<tr id="tr1" style="display:none">
<td align="center">a1</td>
<td>Add-on1</td>
<td>
<cfinput type="Text" name="a1" value="Add-on1">
</td>
</tr>
<tr id="tr2" style="display:none">
<td align="center">a2</td>
<td>Add-on2</td>
<td>
<cfinput type="Text" name="a2" value="Add-on2">
</td>
</tr>
<tr id="tr3" style="display:none">
<td align="center">a3</td>
<td>Add-on - Daily1</td>
<td>
<cfinput type="Text" name="a1d" value="Add-on - Daily1">
</td>
</tr>
<tr id="tr4" style="display:none">
<td align="center">a4</td>
<td>Add-on - Daily2</td>
<td>
<cfinput type="Text" name="a2d" value="Add-on - Daily2">
</td>
</tr>
<tr>
<td colspan=3>
<input type="submit" name="Submit" value="Submit"></td>
</tr>
</cfform>
</table>
<!--- ----------------------------------------------------------------- --->
<table border="0">
<tr>
<td align="right">Add-on1: </td>
<td>Add-on1</td>
</tr>
<tr>
<td align="right">Add-on2: </td>
<td>Add-on2</td>
</tr>
<tr>
<td align="right">Add-on3 - Daily1: </td>
<td>Add-on - Daily1</td>
</tr>
<tr>
<td align="right">Add-on4 - Daily2: </td>
<td>Add-on - Daily2</td>
</tr>
</table>
</body>
</html>
JS
// Code goes here
function toggle_it(itemClickedID, itemID) {
// Toggle visibility between none and ''
if ((document.getElementById(itemID).style.display == 'none')) {
document.getElementById(itemID).style.display = '';
//gets the parent element of the parent element which is the row
document.getElementById(itemClickedID).parentElement.parentElement.style.display = 'none';
event.preventDefault();
} else {
event.preventDefault();
//gets the parent element of the parent element which is the row
document.getElementById(itemClickedID).parentElement.parentElement.style.display = '';
document.getElementById(itemID).style.display = 'none';
}
}

getting some tr values dynamically with jquery and passe them with ajax to php

I want to pass some td values to ajax call when pressing the button "Delete"
How can I do that with jquery?
<table>
<tr>
<td class="datao">first column</td>
<td class="data1">first column</td>
<td class="data2">first column</td>
<td colspan="2"></td>
</tr>
<tr>
<td class="datao">xzczxc</td>
<td class="data1">xzczxc</td>
<td class="data2">xzczxc</td>
<td>
<input type="button" class="deleteRow" value="Delete" />
</td>
</tr>
<tr>
<td class="datao">xzczxc</td>
<td class="data1">xzczxc</td>
<td class="data2">xzczxc</td>
<td>
<input type="button" class="deleteRow" value="Delete" />
</td>
</tr>
<tr>
<td class="datao">xzczxc</td>
<td class="data1">xzczxc</td>
<td class="data2">xzczxc</td>
<td>
<input type="button" class="deleteRow" value="Delete" />
</td>
</tr>
<tr>
<td class="datao">xzczxc</td>
<td class="data1">xzczxc</td>
<td class="data2">xzczxc</td>
<td>
<input type="button" class="deleteRow" value="Delete" />
</td>
</tr>
<tr>
<td class="datao">xzczxc</td>
<td class="data1">xzczxc</td>
<td class="data2">xzczxc</td>
<td>
<input type="button" class="deleteRow" value="Delete" />
</td>
</tr>
</table>
UPDATE:
Supposing that I want to grab the value of input type=text inside of the 's.
HTML Example:
<table>
<tr>
<td class="datao">
<select class="someclass">
<option value="asdsa">somevalue</option>
</select>
</td>
<td class="datao">
<input type="text" value="eqw" />
</td>
<td class="datao">
<input type="text" value="gfg" />
</td>
<td>
<input type="button" class="deleteRow" value="Delete" />
</td>
</tr>
<tr>
<td class="datao">
<select class="someclass">
<option value="wq">somevalue</option>
</select>
</td>
<td class="datao">
<input type="text" value="hfd" />
</td>
<td class="datao">
<input type="text" value="vcv" />
</td>
<td>
<input type="button" class="deleteRow" value="Delete" />
</td>
</tr>
<tr>
<td class="datao">
<select class="someclass">
<option value="cva">somevalue</option>
</select>
</td>
<td class="datao">
<input type="text" value="ewd" />
</td>
<td class="datao">
<input type="text" value="asad" />
</td>
<td>
<input type="button" class="deleteRow" value="Delete" />
</td>
</tr>
</table>
jquery's code:
Let's say I want to grab select's value each row of data...
$('input.deleteRow').live('click', function() {
var values = [];
$(this).closest('tr').find("select").each(function() {
values.push($(this).attr('value'));
});
//Confirm
//the ok stores true or false returned by confirm!
var ok = confirm("Are you sure...?");
//testing for true
if(ok){
$.post("phpscript.php", { someName:values[0] }, function(data) {
if(data == '1'){
alert("something");
location.reload();
}
else
alert("something else, error probably");
});
}
});
If you want to grab select and input type="text" just need to do: ...find("select, input[type=text]")...
This is my contribute to the community.
Anyway, I would like to find an elegant way of sending the data to the php script give a hand on it.

May use http://www.datatables.net/ - much easier than program all by your self?

You will want to attach an event handler to each of the input buttons that will go to the button's parent (<td>) and then go to that node's siblings (the other <td>s). For each of these you will get the inner HTML for the respective <td> and then figure out some way to pair these all together (delimited string maybe?)
$('input.deleteRow').live('click', function() {
var returnString = '';
$(this).parent().siblings().each(function() {
returnString += $(this).html();
});
$.ajax({
url: 'somephpurlhere.php',
data: returnString
}).success(function() {
//dosomething
}).fail(function() {
//dosomethingelse
});
});
You will need to modify the .ajax call to suit your needs as you haven't expressed how you are handling responses, etc.
If you want to check if a given DOM element contains a td or an input then you could replace the .each functionality as follows:
$(this).parent().siblings().each(function() {
if ($(this).find('td').length > 0)
resultString += $(this).find('td').html();
else if ($(this).find('input').length > 0)
resultString += $(this).find('input').val();
else
resultString += $(this).html();
});

Categories

Resources