I have the following code which works fine for the first row, but doesn't seem to loop through the table
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<table width="100%" border="0" cellspacing="2" cellpadding="2" id="demotbl">
<tr>
<th scope="col">Header 1</th>
<th scope="col">Header 2</th>
</tr>
<tr>
<td id="prodref">AA1</td>
<td><input type="text" name="h_prodref" id="h_prodref"></td>
</tr>
<tr>
<td id="prodref">BB1</td>
<td><input type="text" name="h_prodref" id="h_prodref"></td>
</tr>
<tr>
<td id="prodref">CC1</td>
<td><input type="text" name="h_prodref" id="h_prodref"></td>
</tr>
<tr>
<td id="prodref">DD1</td>
<td><input type="text" name="h_prodref" id="h_prodref"></td>
</tr>
<tr>
<td id="prodref">EE1</td>
<td><input type="text" name="h_prodref" id="h_prodre5"></td>
</tr>
<tr>
<td id="prodref">FF1</td>
<td><input type="text" name="h_prodref" id="h_prodref"></td>
</tr>
</table>
<p id="demo"></p>
<script type="text/javascript">
var x = document.getElementById("demotbl").rows.length;
document.getElementById("demo").innerHTML = "Found " + x + " tr elements in the table.";
var prodref = document.getElementById("prodref").innerHTML;
var i = 0;
do {
document.getElementById("h_prodref").value = prodref;
i++;
}
while (i < x);
</script>
</body>
</html>
My understanding (which is very basic) is that the code will look for a id called prodref and then copy the cell value to the text box, and work its way down until it has completed all rows.
As mention above id must be unique. I create the following example using classes instead:
var x = document.getElementById("demotbl").rows.length;;
document.getElementById("demo").innerHTML = "Found " + x + " tr elements in the table.";
var prodref = document.getElementsByClassName("prodref");
var h_prodref = document.getElementsByClassName("h_prodref");
var i = 0;
for (i; i < prodref.length; i++) {
h_prodref[i].value = prodref[i].innerHTML;
}
<table width="100%" border="0" cellspacing="2" cellpadding="2" id="demotbl">
<tr>
<th scope="col">Header 1</th>
<th scope="col">Header 2</th>
</tr>
<tr>
<td class="prodref">AA1</td>
<td>
<input type="text" name="h_prodref" class="h_prodref">
</td>
</tr>
<tr>
<td class="prodref">BB1</td>
<td>
<input type="text" name="h_prodref" class="h_prodref">
</td>
</tr>
<tr>
<td class="prodref">CC1</td>
<td>
<input type="text" name="h_prodref" class="h_prodref">
</td>
</tr>
<tr>
<td class="prodref">DD1</td>
<td>
<input type="text" name="h_prodref" class="h_prodref">
</td>
</tr>
<tr>
<td class="prodref">EE1</td>
<td>
<input type="text" name="h_prodref" class="h_prodref">
</td>
</tr>
<tr>
<td class="prodref">FF1</td>
<td>
<input type="text" name="h_prodref" class="h_prodref">
</td>
</tr>
</table>
<p id="demo"></p>
Example with your original html that I don't suggest using Document.querySelectorAll():
var x = document.getElementById("demotbl").rows.length;;
document.getElementById("demo").innerHTML = "Found " + x + " tr elements in the table.";
var prodref = document.querySelectorAll("#prodref");
var h_prodref = document.querySelectorAll("#h_prodref");
var i = 0;
for (i; i < prodref.length; i++) {
h_prodref[i].value = prodref[i].innerHTML;
}
<table width="100%" border="0" cellspacing="2" cellpadding="2" id="demotbl">
<tr>
<th scope="col">Header 1</th>
<th scope="col">Header 2</th>
</tr>
<tr>
<td id="prodref">AA1</td>
<td>
<input type="text" name="h_prodref" id="h_prodref">
</td>
</tr>
<tr>
<td id="prodref">BB1</td>
<td>
<input type="text" name="h_prodref" id="h_prodref">
</td>
</tr>
<tr>
<td id="prodref">CC1</td>
<td>
<input type="text" name="h_prodref" id="h_prodref">
</td>
</tr>
<tr>
<td id="prodref">DD1</td>
<td>
<input type="text" name="h_prodref" id="h_prodref">
</td>
</tr>
<tr>
<td id="prodref">EE1</td>
<td>
<input type="text" name="h_prodref" id="h_prodref">
</td>
</tr>
<tr>
<td id="prodref">FF1</td>
<td>
<input type="text" name="h_prodref" id="h_prodref">
</td>
</tr>
</table>
<p id="demo"></p>
Also you have a typo here:
<tr>
<td id="prodref">EE1</td>
<td><input type="text" name="h_prodref" id="h_prodre5"></td>
</tr>
id is h_prodref no h_prodre5.
Here you go.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<table width="100%" border="0" cellspacing="2" cellpadding="2" id="demotbl">
<tr>
<th scope="col">Header 1</th>
<th scope="col">Header 2</th>
</tr>
<tr>
<td id="prodref1">AA1</td>
<td><input type="text" name="h_prodref" id="h_prodref1"></td>
</tr>
<tr>
<td id="prodref2">BB1</td>
<td><input type="text" name="h_prodref" id="h_prodref2"></td>
</tr>
<tr>
<td id="prodref3">CC1</td>
<td><input type="text" name="h_prodref" id="h_prodref3"></td>
</tr>
<tr>
<td id="prodref4">DD1</td>
<td><input type="text" name="h_prodref" id="h_prodref4"></td>
</tr>
<tr>
<td id="prodref5">EE1</td>
<td><input type="text" name="h_prodref" id="h_prodref5"></td>
</tr>
<tr>
<td id="prodref6">FF1</td>
<td><input type="text" name="h_prodref" id="h_prodref6"></td>
</tr>
</table>
<p id="demo"></p>
<script type="text/javascript">
var x = document.getElementById("demotbl").rows.length - 1;
document.getElementById("demo").innerHTML = "Found " + x + " tr elements in the table.";
var i = 0;
do {
var prodref = document.getElementById("prodref" + (i + 1)).innerHTML;
document.getElementById("h_prodref" + (i + 1)).value = prodref;
i++;
}
while (i < x);
</script>
</body>
</html>
I not sure that this will be the solution to your problem. I have done something similar in the past. My tip is not to use 'id' when dealing with more than one element but to use 'class' instead. Hope you fix it! :)
You have many elements with the same id. id is always unique to a element. If you are using id's as a way to say apply the same styles to multiple elements you should use a class instead.
In your code the statement:
document.getElementById("prodref")
will always return you the first element matching the id: "prodref". Which is the element:
<td id="prodref">AA1</td>
.getElementById() returns the same element so you are setting the same td in every loop. This will do what you wanted;
var i = 0;
var elements = document.getElementsByTagName("td");
do {
elements[i+1].firstChild.value = elements[i].innerText;
i = i+2;
}
while (i < elements.length);
Related
I have a form. It contains Name , quantity & price . I want to get input from form and store in Angularjs Objects. Then i have to output to View the whole array of angular objects. I tried with Angular Array it worked but to show in table ng-repeat not work . So i have to use Objects and output in table
CODE
Form
<div class="leftDev">
<h1>Enter New Product</h1>
<Table>
<tr>
<td><label for="name">Name:</label></td>
<td><input type="text" name="naam" ng-model="naam"> </td>
</tr>
<tr>
<td><label for="quantity">Quantity:</label></td>
<td><input type="number" name="quantity" ng-model="quantity"> </td>
</tr>
<tr>
<td><label for="price">Price:</label></td>
<td><input type="text" name="price" ng-model="price"> </td>
</tr>
<tr>
<td></td>
<td><button ng-click='push()'>ADD</button></td>
</tr>
</Table>
OUTPUT Table
<div class="rightDev">
<table border="2">
<tr>
<th>
Name
</th>
<th>
Quantity
</th>
</tr>
<tr ng-repeat="" >
<td >
</td>
<td >
</td>
</tr>
</table>
</div>
Script
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script>
var myApp = angular.module("myApp",[]);
myApp.controller('myCtrl',function($scope){
$scope.items={
name:"jay",quantity:"100",price:"200"
};
$scope.push = function(){
$scope.items.name.push($scope.naam);
$scope.items.quantity.push($scope.quantity);
$scope.items.price.push($scope.price);
}
})
</script>
So , please show me right way to do it.
myApp.controller('myCtrl',function($scope){
$scope.list = [];
$scope.item = {
name:"jay",quantity:"100",price:"200"
};
$scope.push = function(){
$scope.list.push($scope.item);
$scope.item = {};
}
})
<h1>Enter New Product</h1>
<Table>
<tr>
<td><label for="name">Name:</label></td>
<td><input type="text" name="name" ng-model="item.name"> </td>
</tr>
<tr>
<td><label for="quantity">Quantity:</label></td>
<td><input type="number" name="quantity" ng-model="item.quantity"> </td>
</tr>
<tr>
<td><label for="price">Price:</label></td>
<td><input type="text" name="price" ng-model="item.price"> </td>
</tr>
<tr>
<td></td>
<td><button ng-click='push()'>ADD</button></td>
</tr>
</Table>
<div class="rightDev">
<table border="2">
<tr>
<th>
Name
</th>
<th>
Quantity
</th>
</tr>
<tr ng-repeat="obj in list" >
<td >
{{obj.name}}
</td>
<td >
{{obj.quantity}}
</td>
</tr>
</table>
</div>
I am trying to sum a price in a table, all the prices in the <td> have the same class name and I'd like to sum them up on a button click. I would eventually like to calculate the quantity into the total as well. This is what I have so far:
function sumAmounts() {
var sum = 0;
var listPriceTotal = $('.txtListPrice').each(function() {
sum += parseFloat($(this).html); // Or this.innerHTML, this.innerText
});
document.getElementById("txtTotal").value = listPriceTotal;
}
document.getElementById("addTotals").addEventListener("click", () => {
sumAmounts();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table">
<tr>
<th><label>SKU</label></th>
<th><label>Retail Price</label></th>
<th><label>List Price</label></th>
<th><label>Product Name</label></th>
<th><label>Quantity</label></th>
</tr>
<tr>
<td class="txtSKU">1234</td>
<td class="txtRetailPrice">12.50</td>
<td class="txtListPrice">11.75</td>
<td class="txtProductName">product 1</td>
<td class="txtQuantity"><input type="text"> </td>
</tr>
<tr>
<td class="txtSKU">12222</td>
<td class="txtRetailPrice">14.50</td>
<td class="txtListPrice">9.75</td>
<td class="txtProductName">product 2</td>
<td class="txtQuantity"><input type="text"> </td>
</tr>
<tfoot>
<th><label id="lblTotal">Total:</label><input type="text" name="txtTotal" id="txtTotal">
<input type="button" value="Add" id="addTotals">
</th>
</tfoot>
</table>
There's two issues in your code. Firstly you're trying to set a jQuery object as the value of the input, which is why you see [Object object] in the field. You need to set the value to sum.
The second issue is that you're supplying the html method reference to parseFloat(), not the actual html() value. With both of those addressed, the code works:
function sumAmounts() {
var sum = 0;
$('.txtListPrice').each(function() {
sum += parseFloat($(this).html());
});
document.getElementById("txtTotal").value = sum;
}
document.getElementById("addTotals").addEventListener("click", () => {
sumAmounts();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table">
<tr>
<th><label>SKU</label></th>
<th><label>Retail Price</label></th>
<th><label>List Price</label></th>
<th><label>Product Name</label></th>
<th><label>Quantity</label></th>
</tr>
<tr>
<td class="txtSKU">1234</td>
<td class="txtRetailPrice">12.50</td>
<td class="txtListPrice">11.75</td>
<td class="txtProductName">product 1</td>
<td class="txtQuantity"><input type="text"> </td>
</tr>
<tr>
<td class="txtSKU">12222</td>
<td class="txtRetailPrice">14.50</td>
<td class="txtListPrice">9.75</td>
<td class="txtProductName">product 2</td>
<td class="txtQuantity"><input type="text"> </td>
</tr>
<tfoot>
<th>
<label id="lblTotal">Total:</label>
<input type="text" name="txtTotal" id="txtTotal">
<input type="button" value="Add" id="addTotals">
</th>
</tfoot>
</table>
I have a form that prints a out menu items from each category. I want to have a select all checkbox over each category such that when clicked, all checkboxes of that category are selected.
Issue: Sometimes some check boxes are not checked by default e.g. no data in database - in that case the select all checkbox should not be checked when page is rendered (it should only checked if all its child check boxes are checked).
Current partial implementation (checked is true for select all even if some of its some menu items are not checked?!):
checked = true;
$(".all").click(function() {
checked = !checked;
var selectid = this.id.replace(/ /g, '');
console.log("====>>>" + selectid);
var item = `${selectid}-item`;
console.log("===<<<" + item)
var checkElements = $(`.${selectid}-item`).prop('checked', checked);
$(selectid + "-item").prop('checked', !checked);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post">
<table class="report">
<br />
<tr>
<th colspan='2'></th>
<th colspan='2'></th>
<th colspan='2'></th>
</tr>
<tr>
<th colspan='2'>Cats</th>
<th colspan='2'>Available</th>
<th colspan='2'><input id="Cats" class="all" type="checkbox" checked="true" /> </th>
</tr>
<tr>
<td colspan='2'>Cat 1</td>
<td colspan='2'><input name="Cats,cat1" class="Cats-item" type="checkbox" checked="true" /></td>
</tr>
<tr>
<td colspan='2'>Cat 2</td>
<td colspan='2'><input name="Cats,cat2" class="Cats-item" type="checkbox" checked="true" /></td>
</tr>
<tr>
<td colspan='2'>Cat 3</td>
<td colspan='2'><input name="Cats,cat3" class="Cats-item" type="checkbox" checked="true" /></td>
</tr>
</table>
<table class="report">
<br />
<tr>
<th colspan='2'></th>
<th colspan='2'></th>
<th colspan='2'></th>
</tr>
<tr>
<th colspan='2'>Dogs</th>
<th colspan='2'>Available</th>
<th colspan='2'><input id="Dog Big" class="all" type="checkbox" checked="true" /> </th>
</tr>
<tr>
<td colspan='2'>Dog 1</td>
<td colspan='2'><input name="Dogs,dogs1" class="Dog Big-item" type="checkbox" checked="true" /></td>
</tr>
<tr>
<td colspan='2'>Dog 2</td>
<td colspan='2'><input name="Dogs,dogs2" class="Dog Big-item" type="checkbox" checked="true" /></td>
</tr>
<tr>
<td colspan='2'>Dog 3</td>
<td colspan='2'><input name="Dogs,dogs3" class="Dog Big-item" type="checkbox" checked="true" /></td>
</tr>
</table>
<input type="submit" value="Save Setting" style="margin-top:20px; margin-left:0;">
</form>
I had to normalise your classes. They were not consistent. Don't have spaces in IDs (I got rid of the ID from all)
and do not have spaces between classNames that mean something when taken together
const checkAll = () => {
$(".all").each(function() {
const subClass = $(this).data("class");
const $sub = $("." + subClass+"-item");
$(this).prop("checked", $sub.length === $sub.filter(":checked").length)
})
};
$(function() {
checkAll(); //on load
$(".all").on("click", function() {
const $sub = $("." + $(this).data("class")+"-item");
const checked = this.checked;
$sub.prop('checked', checked);
})
$(".item").on("click", checkAll)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post">
<table class="report">
<br />
<tr>
<th colspan='2'></th>
<th colspan='2'></th>
<th colspan='2'></th>
</tr>
<tr>
<th colspan='2'>Cats</th>
<th colspan='2'>Available</th>
<th colspan='2'><input data-class="Cat" class="all" type="checkbox" checked="true" /> </th>
</tr>
<tr>
<td colspan='2'>Cat 1</td>
<td colspan='2'><input name="Cats,cat1" class="item Cat-item" type="checkbox" checked="true" /></td>
</tr>
<tr>
<td colspan='2'>Cat 2</td>
<td colspan='2'><input name="Cats,cat2" class="item Cat-item" type="checkbox" checked="true" /></td>
</tr>
<tr>
<td colspan='2'>Cat 3</td>
<td colspan='2'><input name="Cats,cat3" class="item Cat-item" type="checkbox" checked="true" /></td>
</tr>
</table>
<table class="report">
<br />
<tr>
<th colspan='2'></th>
<th colspan='2'></th>
<th colspan='2'></th>
</tr>
<tr>
<th colspan='2'>Dogs</th>
<th colspan='2'>Available</th>
<th colspan='2'><input data-class="Dog_Big" class="all" type="checkbox" checked="true" /> </th>
</tr>
<tr>
<td colspan='2'>Dog 1</td>
<td colspan='2'><input name="Dogs,dogs1" class="item Dog_Big-item" type="checkbox" checked="true" /></td>
</tr>
<tr>
<td colspan='2'>Dog 2</td>
<td colspan='2'><input name="Dogs,dogs2" class="item Dog_Big-item" type="checkbox" checked="true" /></td>
</tr>
<tr>
<td colspan='2'>Dog 3</td>
<td colspan='2'><input name="Dogs,dogs3" class="item Dog_Big-item" type="checkbox" checked="true" /></td>
</tr>
</table>
<input type="submit" value="Save Setting" style="margin-top:20px; margin-left:0;">
</form>
<form id="form1" runat="server">
<table border="1" id="ResultSheet">
<tr id ="Name">
<td> Student Name</td>
<td><input type="text" /></td>
</tr>
<tr>
<td>Subject Name</td>
</tr>
<tr>
<td>Maths</td>
<td><input type="text" /></td>
</tr>
<tr>
<td>Science</td>
<td><input type ="text" /></td>
</tr>
<tr>
<td>English</td>
<td><input type ="text" /></td>
</tr>
</table>
</form>
I have this table and now I want to get the value of each of input type. how do I get it.
I've tried:
document.getElementById("ResultSheet").rows[2].cells.item(0).innerHTML);
But it did not return anything.
You could use querySelectorAll() like :
document.querySelectorAll('#ResultSheet input');
The loop through the result like the snippet below shown.
Hope this helps.
var inputs = document.querySelectorAll('#ResultSheet input');
for(var i=0;i<inputs.length;i++){
console.log(inputs[i].value);
}
<form id="form1" runat="server">
<table border="1" id="ResultSheet">
<tr id ="Name">
<td> Student Name</td>
<td><input type="text" value="1"/></td>
</tr>
<tr>
<td>Subject Name</td>
</tr>
<tr>
<td>Maths</td>
<td><input type="text" value="2"/></td>
</tr>
<tr>
<td>Science</td>
<td><input type ="text" value="3"/></td>
</tr>
<tr>
<td>English</td>
<td><input type ="text" value="4"/></td>
</tr>
</table>
</form>
Use <form> property elements: https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/elements
Example: https://jsfiddle.net/8co9v0ye/
I have this table :
<table>
<thead>
<tr>
<th>Quantity</th>
<th> </th>
<th>Price</th>
<th>Sum</th>
</tr></thead>
<tbody>
<tr class="sum">
<td><input class="qty" type="text" value="1" /></td>
<td>German format: </td>
<td data_price="1375.5">1.375,50 €</td>
<td></td>
</tr>
<tr class="sum">
<td><input class="qty" type="text" value="1" /></td>
<td>English format:</td>
<td data_price="1375.5">€1,375.50</td>
<td></td>
</tr>
<tr class="sum">
<td><input name="text" type="text" class="qty" value="1" /></td>
<td>French format:</td>
<td data_price="1375.5">1 375,50 €</td>
<td></td>
</tr>
<tr class="sum">
<td><input name="text2" type="text" class="qty" value="1" /></td>
<td>Italian format:</td>
<td data_price="1375.5">€1,375.50</td>
<td></td>
</tr>
<tr class="sum">
<td><input class="qty" type="text" value="1" /></td>
<td>Spanish format:</td>
<td data_price="1375.5">€ 1.375,50</td>
<td></td>
</tr>
<tr>
<td colspan="3">Total</td>
<td id="total"></td>
</tr>
</tbody>
</table>
and I want to use the value of attribute "data_price" to calculate the SUM like in this link :
http://jsfiddle.net/QmTNZ/77/
I want to use only the attribute "data_price" in calculation and not the .
Please help, I'm still beginner in jquery :)
For your price cells, you should use this format:
<td data-price="1375.5">€1,375.50</td>
i.e. with a hyphen, not underscore
You can then use:
$('td').data('price')
to access its value - see http://api.jquery.com/data
e.g.
var sum = 0;
$('.sum').each(function() {
var q = parseFloat($(this).find('.qty').val());
var p = parseFloat($(this).find('td').eq(2).data('price'));
sum += q * p;
});
$('#total').text(sum);
Working demo at http://jsfiddle.net/alnitak/gzYhN/
Try
var sum=0;
$('tbody > tr > td[data_price]').each(
function()
{
sum += parseFloat(this.attr('data_price'));
}
);
Try this: http://jsfiddle.net/ptfKJ/
This example is using your original HTML code.