I am trying to add the values the user enteres into the Slots cell in each row. I want to get the totals and place it in the SlotsTotals field. But, the code is not working at all.
function checkRow(){
var table = document.getElementById('tblSample');
for (var i = 0, row; row = table.rows[i]; i++){
document.getElementById('SlotsTotals').value += document.getElementById('txtSlots' + i).value;
}
}
I'm dynamically adding rows to a table. The user will input values into the slots field. I want to loop through the table to get a total of all the values and add then total to the SlotsTotal field.
Here is my some of my html to add the rows.
function addRow() {
//function ValidateRow(){alert('error');}
//function insertRow();
var tbl = document.getElementById('tblSample');
var lastRow = tbl.rows.length;
// if there's no header row in the table, then iteration = lastRow + 1
//var iteration = lastRow;
var iteration = lastRow;
var row = tbl.insertRow(lastRow);
var cell5 = row.insertCell(6);
var element5 = document.createElement('input');
element5.type = 'text';
element5.name = 'txtSlots' + iteration;
element5.id = 'txtSlots' + iteration;
element5.size = 10;
cell5.appendChild(element5);
}
could you post some of your html code please
maybe try
document.getElementById('SlotsTotals').innerHTML
http://www.w3schools.com/jsref/met_doc_getelementbyid.asp
__
maybe this can help :)
<table id='tblSample' style='border: 1pt, solid, black;'>
<tr>
<td>
...A1
</td>
<td>
...A2
</td>
<td>
...A3
</td>
<td>
...A4
</td>
<td>
...A5
</td>
<td>
<input type='text' id='txtSlots1'>
</td>
</tr>
<tr>
<td>
...B1
</td>
<td>
...B2
</td>
<td>
...B3
</td>
<td>
...B4
</td>
<td>
...B5
</td>
<td>
<input type='text' id='txtSlots2'>
</td>
</tr>
<tr>
<td>
...C1
</td>
<td>
...C2
</td>
<td>
...C3
</td>
<td>
...C4
</td>
<td>
...C5
</td>
<td>
<input type='text' id='txtSlots3'>
</td>
</tr>
<tr>
<td>
...D1
</td>
<td>
...D2
</td>
<td>
...D3
</td>
<td>
...D4
</td>
<td>
...D5
</td>
<td>
<input type='text' id='txtSlots4'>
</td>
</tr>
<tr>
<td>
...E1
</td>
<td>
...E2
</td>
<td>
...E3
</td>
<td>
...E4
</td>
<td>
...E5
</td>
<td>
<input type='text' id='txtSlots5'>
</td>
</tr>
</table>
<input type='button' onclick="test();" value="test">
<input type='text' id='SlotsTotals'>
<script>
function test(){
var table = document.getElementById('tblSample');
res = document.getElementsByTagName('input');
sum = 0
for (var i = 0; i < res.length; i++){
s = res[i].id
if((String(s).indexOf("txtSlots") > -1)&&(res[i].type == 'text'))
{
sum += parseInt(res[i].value)
}
}
document.getElementById('SlotsTotals').value = sum
}
</script>
Related
I have been trying to come up with a way to implement a click listener to each cell at a table. I realized that selector 'td:eq(index)' is letting me put an event listener individually to each cell.
However, I realized that each time this piece of code runs, all the cells get the last value of the variables. Meaning all the values are updated each time the code runs and I can't assign varying data to each cell.
How do I fix this ? Where am I going wrong? What is the correct way to actually accomplish this ? Here is what I am talking about:
var k = 0; var x = 1; var y = 1;
$('#output').on('click','td:eq('+k +')',function(){
$(this).text((x).toString()+'.'+(y).toString())
})
This puts the click listener and the element turns to 1.1 after click.
However when I run the code a second time:
k = 1; x = 2; y= 2;
$('#output').on('click','td:eq('+k +')',function(){
$(this).text((x).toString()+'.'+(y).toString())
})
I get two click listeners placed in the right spot, but both values are 2.2
I case anyone wonders, output is my table div and this is how I create the table:
$('#output').append('<table border = \"1\">');
for(var i = 0; i< intHeight;i++){
$('#output').find('table').append('<tr> id=' + i+"."+j);
for(var j = 0; j < intWidth; j ++){
intCell = 'click me';
var current = $(this);
$('#output').find('tr:last').append('<td>'+intCell)
}
}
Thanks ahead for any help.
Here is an approach to pass data to table cells with click listener.
data = Array($('td').length).fill().map((v, i) => i);
$('td').each(function(index) {
$(this).data('number', data[index])
$(this).click(function() {
alert(JSON.stringify($(this).data()))
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3>Click on Cell to Reveal Data</h3>
<table style="width: 100%;" border="2">
<tbody>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
<!-- DivTable.com -->
Fiddle
There is a simple markup.
I need to cross text in the same table row as checkbox when checkbox change state to 'checked'.
Any help appreciated.
function watcher(){
var checkboxElements = document.getElementsByClassName("checkbox");
for(var i = 0; i<checkboxElements.length; i++){
checkboxElements[i].addEventListener('change', function(){
if(checkboxElements[i].checked === true) {
table.querySelector("table").rows[i].style.textDecoration = 'line-through';
}
});
}
}
<table class='table'>
<tr>
<td>
<input class='checkbox' type='checkbox'>
</td>
<td>
test
</td>
</tr>
<tr>
<td>
<input class='checkbox' type='checkbox'>
</td>
<td>
test
</td>
</tr>
</table>
My code seems doesn't work.
You need to find the ancestor using the function closest() along with the context this to get the reference of the checkbox element.
function watcher() {
var checkboxElements = document.getElementsByClassName("checkbox");
for (var i = 0; i < checkboxElements.length; i++) {
checkboxElements[i].addEventListener('change', function() {
if (this.checked) {
this.closest('tr').style.textDecoration = 'line-through';
}
});
}
}
watcher();
<table class='table'>
<tr>
<td>
<input class='checkbox' type='checkbox'>
</td>
<td>
test
</td>
</tr>
<tr>
<td>
<input class='checkbox' type='checkbox'>
</td>
<td>
test
</td>
</tr>
</table>
I have a table and I want to sort the rows by the user,Each row contains one input, for enter a row number. Here rows are sorted by data-sort Attribute in tr and each input has a rownum attribute whose value is equal to the value of the tr data-sort attribute.There are 6 rows here. We want to take the input value of each row, and move that row there, and the values of the attributes are the same as the input.For example, if you enter 1 in the input of one of the rows, that row will be our first row.
The following code runs for the first time, but after moving one of the rows does not work anymore.When its value changes. where is my mistake?
jsfiddle
$('.m').on('change', function () {
var Des = parseInt($(this).val());
var RowNum = parseInt($(this).attr('rownum'));
$('tr[data-sort="' + RowNum + '"]').attr('data-sort', -100);
$('input[rownum="' + RowNum + '"]').attr('rownum', -100);
if (Des > RowNum) {
for (var i = RowNum + 1; i <= Des; i++) {
var newVal = i - 1;
$('tr[data-sort="' + i + '"]').attr('data-sort', newVal);
$('input[rownum="' + i + '"]').attr('rownum', newVal);
}
}
if (Des < RowNum) {
for (var i = Des + 1; i <= (RowNum - 1); i++) {
var newVal = i + 1;
$('tr[data-sort="' + i + '"]').attr('data-sort', newVal);
$('input[rownum="' + i + '"]').attr('rownum', newVal);
}
}
$('tr[data-sort="-100"]').attr('data-sort', Des);
$('input[rownum="-100"]').attr('rownum', Des);
var divList = $("tr");
divList.sort(function (a, b) {
return (parseInt($(a).data("sort")) - parseInt($(b).data("sort")))
});
$("tbody").html(divList);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<h4>
inter value between 1-6
</h4>
<table class="table table-hover">
<tbody>
<tr id="1" data-sort="1">
<td>One</td>
<td>
<input rownum="1" class="m" />
</td>
</tr>
<tr id="2" data-sort="2">
<td>Two</td>
<td>
<input rownum="2" class="m" />
</td>
</tr>
<tr id="3" data-sort="3">
<td>Three</td>
<td>
<input rownum="3" class="m" />
</td>
</tr>
<tr id="4" data-sort="4">
<td>Four</td>
<td>
<input rownum="4" class="m" />
</td>
</tr>
<tr id="5" data-sort="5">
<td>Five</td>
<td>
<input rownum="5" class="m" />
</td>
</tr>
<tr id="6" data-sort="6">
<td>six</td>
<td>
<input rownum="6" class="m" />
</td>
</tr>
</tbody>
</table>
</div>
as you rebuild and replace html piece of code on which you have your listener, you have to rebind event listener to the new created elements with class "m". Something as below (not elegant,only here to show a working example - and you don't need all your test. You just need to assign input value to data-sort attribut and then reorder with sort function)
$('.m').on('change', function (evt) {
changeOrder(evt);
})
function changeOrder(evt){
$this=$(evt.currentTarget);
var Des = parseInt($this.val());
var RowNum = parseInt($this.attr('rownum'));
$this.parent().parent().data("sort",Des)
var divList = $("tbody").find("tr").sort(function (a, b) {
return (parseInt($(a).data("sort")) - parseInt($(b).data("sort")))
});
$("tbody").html(divList);
$('.m').on('change', function (evt) {
changeOrder(evt);
})
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container">
<h4>
inter value between 1-6
</h4>
<table class="table table-hover">
<tbody>
<tr id="1" data-sort="1">
<td>One</td>
<td>
<input rownum="1" class="m" />
</td>
</tr>
<tr id="2" data-sort="2">
<td>Two</td>
<td>
<input rownum="2" class="m" />
</td>
</tr>
<tr id="3" data-sort="3">
<td>Three</td>
<td>
<input rownum="3" class="m" />
</td>
</tr>
<tr id="4" data-sort="4">
<td>Four</td>
<td>
<input rownum="4" class="m" />
</td>
</tr>
<tr id="5" data-sort="5">
<td>Five</td>
<td>
<input rownum="5" class="m" />
</td>
</tr>
<tr id="6" data-sort="6">
<td>six</td>
<td>
<input rownum="6" class="m" />
</td>
</tr>
</tbody>
</table>
</div>
<form>
<table width="660" border="0" class="DarkButtonStyleMedium">
<tr>
<td width="299"> </td>
<td width="332" rowspan="11"><img src="Images/PCD-HOLES.png" width="350" height="353"
class="ButtonStyleMedium"/></td>
</tr>
<tr>
<td>
<div align="right">PITCH CIRCLE <span
class="GeneralPageTextWhite">DIAMETER (PCD):</span><span
class="GeneralPageText">:
<input name="diameter" type="Number" class="ButtonStyleMedium" id="diameter"
value="" size="12"/>
</span></div>
</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td>
<div align="right"><span class="GeneralPageTextWhite"> NUMBER OF HOLES:
<input name="number" type="Number" class="ButtonStyleMedium" id="number"
value="" size="12"/>
</span></div>
</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td>
<div align="right"><span class="GeneralPageTextWhite">START ANGLE (A):
<input name="startangle" type="Number" class="ButtonStyleMedium" id="startangle"
value="" size="12"/>
</span></div>
</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td>
<div align="right"><span class="GeneralPageText">
<input type="button" class="ButtonStyleMedium" onclick="calculateAll();" value='SOLVE'/>
</span></div>
</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td>
<div align="right"><span class="GeneralPageText">
<input type="button" class="ButtonStyleMedium" onclick="clearAll();clearTable();" value='RESET'/>
</span></div>
</td>
</tr>
<tr>
<td> </td>
</tr>
</table>
<p> </p>
<div class="ButtonStyleAnswer">
<table id="resultTable" width=600 border="0.5">
<colgroup>
<col width=200>
</colgroup>
<tr>
<th>
<div align="left" width=200 >HOLE NUMBER</div>
</th>
<th>
<div align="left" width=200 >X CO-ORDINATE</div>
</th>
<th>
<div align="left" width=200 >Y CO-ORDINATE</div>
</th>
</tr>
<tr>
<td height="19" colspan="3">
<div align="center"></div>
<div align="center"></div>
<div align="center"></div>
</td>
</tr>
</table>
</div>
<p> </p>
</form>
<p> </p>
</div>
<script>
function calculateAll() {
var diameter = Number(document.getElementById("diameter").value);
var number = Number(document.getElementById("number").value);
var startangle = Number(document.getElementById("startangle").value);
do {
var holenumber = 0;
var boltholenumber = holenumber + 1;
var radius = diameter / 2;
var k = (holenumber * (360 / number)) + startangle;
var xresult = radius * Math.cos(k);
var yresult = radius * Math.sin(k);
var table = document.getElementById("resultTable");
var row = table.insertRow(-1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(1);
cell2.innerHTML = xresult.toFixed(5);
cell3.innerHTML = yresult.toFixed(5);
cell1.innerHTML = boltholenumber.toFixed(0);
holenumber++;
}
while (holenumber > number);
}
function clearAll() {
document.getElementById("diameter").value = "";
document.getElementById("number").value = "";
document.getElementById("startangle").value = "";
document.getElementById("boltholenumber").value = "";
document.getElementById("xresult").value = "";
document.getElementById("yresult").value = "";
}
function clearTable() {
var elmtTable = document.getElementById('resultTable');
var tableRows = elmtTable.getElementsByTagName('tr');
var rowCount = tableRows.length;
for (var x = rowCount - 1; x > 0; x--) {
elmtTable.removeChild(tableRows[x]);
}
}
</script>
Hi
I have a two part question but I'm not sure if this allowed.
The first part being I can only get one row of outputs from the do/while loop, is this because I am writing to the same cells although I am using table.insertRow(-1) within the loop.
The second part is I cannot clear the one row of results from the table using the clearAll function, i cannot see why. I have used Jsfiddle and get no hints.
All,
I have table which I am cloning on clicking on button and after cloning table I need to do few calculation in the cloned table as well as in parent table. My problem is that I am not able to do calculation on each appended(clone) table. I mean I wrote a on blur function to do calculation with textbox value but when I am cloning table since class name is same for all textbox, in parent and cloned table my result showing in all textbox instead of corresponding part of the table. Here is my table and my jquery code which I am following.
<html>
<body>
<table>
<tbody>
<tr><td>
<table width="95%" border="0" cellspacing="5" cellpadding="5" style="margin-left:10px;" id="product">
<thead><tr>
<td class="mandatory"> * Product Name </td>
<td class="label"> Qty.in Stock</td>
<td class="mandatory">* Qty </td>
<td class="mandatory">* Unit Price</td>
<td class="mandatory">* List Price</td>
<td class="mandatory">* Total</td>
</tr>
</thead>
<tbody class="product_details" id="tbody_product">
<tr class="tr_product_details">
<td>
<input type="text" name="txtproductName[]" id="product-name" />
<a href="">
<img width="17" height="16" src="images/Products_small.gif"> </a>
<input type="hidden" name="productid[]" id="productid" />
</td>
<td>
<input type="text" name="txtqtyStock[]" id="productstock" />
</td>
<td>
<input type="text" name="txtQty" id="product-quatity" class="product-qty" value="3" />
</td>
<td>
<input type="text" name="txtUnitPrice[]" id="product-price" />
</td>
<td>
<input type="text" name="txtListPrice[]" id="product-list-price" class="product-list-price"
/>
</td>
<td><div style="margin-left:120px;">
<input type="text" name="txtTotal[]" size="10" class="total-price" />
</div>
</td>
</tr>
<tr>
<td colspan="5"> <img width="17" height="16" src="images/spacer.gif">Product Description </td>
</tr>
<tr>
<td colspan="5"><textarea style="width:65%" maxlength="250" rows="3" cols="30" name="txtProductDescription[]" id="textarea-product-description"></textarea>
</td>
<td colspan="1" class="tbl">
<table >
<tr>
<td>Discount: </td>
<td> <input type="text" name="txtProductDiscount[]" size="10" class="product-discount" /></td>
</tr>
<tr>
<td class="label">Total After Discount: </td>
<td> <input type="text" name="txtAfterDiscount[]" size="10" class="total-after-discount" /></td>
</tr>
<tr>
<td> Tax: </td>
<td><input type="text" name="txtProductTax[]" size="10" />
</td>
</tr>
<tr>
<td class="label"> Net Total: </td>
<td><input type="text" name="txtNetTotal[]" size="10" class="net-total" /> </td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
<table align="left" style="margin-left:20px;">
<tr>
<td><input type="button" id="btnaddProduct" value="Add Product" class="button"/> </td>
</tr>
</table>
</body>
</html>
And my script which I am using :
<script type="text/javascript">
$(document).ready(function () {
var parent_qty_id = $("#product tbody:first").attr('id');
var qty_attr = parent_qty_id+" tr:first .product-qty";
$("#"+qty_attr+" .product-qty").bind("blur change",function(){
var product_qty = $(this).val(), product_list_price = $('#product tr td .product-list-price').val(),total;
total = product_qty * product_list_price;
// alert( $(this).children().children().attr("class"));
// $(this).children().children().attr("class");
var val = $(this).children();
$(val).val(total+'.00');
});
$("#btnaddProduct").click(function() {
var count = ($("tbody .product_details").length) + 1;
var tblid = $("#product tbody:first").attr('id');
var newid = tblid+"_"+count;
$('#product tbody:first').clone(true).insertAfter('#product > tbody:last').attr("id",newid);
$('table#product > tbody:last > tr:first input').val(' ');
$('table#product > tbody:last > tr:last input').val(' ');
$(":text.product-qty").last().val();
return false;
});
});
</script>
$("#"+qty_attr+" .product-qty")
Comes out empty (no element selected) because you already added .product-qty in parent_qty_id to qty_attr.
$("#"+qty_attr)
Works.
There were alot of other errors in your code which made the blur/change routine run twice etc. I've sanitized it some into this:
$(document).ready(function () {
var parent_qty_id = $("#product tbody:first").attr('id');
var qty_attr = parent_qty_id+" tr:first .product-qty";
$("#"+qty_attr).blur(function(){
var product_qty = $(this).val(), product_list_price = $('#product tr td .product-list-price').val(),total;
total = product_qty * product_list_price;
var val = $(this).children();
$(val).val(total+'.00');
});
$("#btnaddProduct").click(function(e) {
e.preventDefault();
var count = ($("tbody .product_details").length) + 1;
var tblid = $("#product tbody:first").attr('id');
var newid = tblid+"_"+count;
$('#product tbody:first').clone(true).insertAfter('#product > tbody:last').attr("id",newid);
$('table#product > tbody:last > tr:first input').val(' ');
$('table#product > tbody:last > tr:last input').val(' ');
$(":text.product-qty").last().val();
});
});
Further tweaking is probably needed.