I have several tables which looks like these below:
<table id="table1">
<tr>
<th>Item</th>
<th>Price</th>
</tr>
<tr>
<td>Item 1</a></td>
<td><input type="text" name="sum1" id="sum1" /></td>
</tr>
<tr>
<td>Item 2</a></td>
<td><input type="text" name="sum2" id="sum2" /></td>
</tr>
<tr>
<td>Item 3</td>
<td><input type="text" name="sum3" id="sum3" /></td>
</tr>
<tr>
<td> </td>
<td>Total:</td>
<td>$total </td>
</tr>
</table>
<table id="table2">
<tr>
<th>Item</th>
<th>Price</th>
</tr>
<tr>
<td>Item 1</a></td>
<td><input type="text" name="sum1" id="sum1" /></td>
</tr>
<tr>
<td>Item 2</a></td>
<td><input type="text" name="sum2" id="sum2" /></td>
</tr>
<tr>
<td>Item 3</td>
<td><input type="text" name="sum3" id="sum3" /></td>
</tr>
<tr>
<td>Item 4</td>
<td><input type="text" name="sum4" id="sum4" /></td>
</tr>
<tr>
<td> </td>
<td>Total:</td>
<td>$total</td>
</tr>
</table>
Does anybody know if there is a possibility to sum item prices for each input (seperately for table1, table2, etc..)
And at the end print sum of items from all items?
You'll need a dom manipulator like jQuery or simply javascript. I'd give the fields a class to make it even easier--say, "sum". Then you can grab all the children "sum"s from the parent tables. Parse their value to an int and add. Not too bad.
Here's a working JS fiddle example
Better way is not to call different elements with similar IDs, it's invalid way. But even if so - you can perform calculations for every table simply working with inputs in this table.
Algorithm:
You run loop for all <table> tags.
For every <table> tag you find all <input>s (no matter what IDs they have);
Calculate total sum for all inputs for current table.
You can do this with JavaScript but better for you is jQuery.
BUT: don't call HTML DOM elements with similar IDs. It's wrong!!!
this should be pretty easy with jquery, assuming you can add a class name called "line-item" or something to each input and a class name "total" to the cell which should display calculated sum, you can do
function calculateSum(tableId){
var sum = 0;
$(tableId + ' .line-item').each(function(){
var value = parseFloat($(this).val().trim());
if(value){
sum += parseFloat($(this).val());
}
});
$(tableId + ' .total').html(sum);
}
and invoke this function with the id of the table for which you want.
If you cannot add a class name, this don't get tuffer even a single bit, but instead of .line-item try to put just input, it should do the trick in this scenario. Instead of .total you can write tr:last-child td:nth-child(2)
UPDATE: added "parseInt" to avoid string concatenation
Related
I want to create a table where rows will be editable by inline. Tables are created using HTML and data are fetch from database. But can't do inline edit total row and after edit save to database.
<table width="50%" border="1" cellpadding="1" cellspacing="1">
<tr>
<td colspan="3">Action</td>
<td>id</td>
<td>userName</td>
<td>Address</td>
<td>Role</td>
<td>Active</td>
</tr>
<tr>
<td>Edit</td>
<td>InlineEdit</td>
<td>delete</td>
<td>1</td>
<td>apache</td>
<td>los angeles</td>
<td>user</td>
<td>y</td>
</tr>
</table>
In second row all data are collect from database. Please help me to solve the difficulty.
Write input tags in between the <td> and assign your php variable to value attribute.
<table width="50%" border="1" cellpadding="1" cellspacing="1">
<tr>
<td colspan="3"><input type="text" value="Action"/></td>
<td><input type="text" value="id"/></td>
<td><input type="text" value="Username"/></td>
<td><input type="text" value="Address"/></td>
<td><input type="text" value="Role"/></td>
<td><input type="text" value="Active"/></td>
</tr>
</table>
is there a way to transform all inputs field to divs? or span or anything.
i have a table like:
<div id="calc">
<table>
<tr>
<td>Principal:</td>
<td><input value="100.00$" /></td>
</tr>
<tr>
<td>start date:</td>
<td><input value="02/02/2002" /></td>
</tr>
<tr>
<td>end date:</td>
<td><input value="02/02/2002" /></td>
</tr>
</table>
</div>
and i want copy this source to a light box without inputs.. like:
<table>
<tr>
<td>Principal:</td>
<td><div>100.00$</div></td>
</tr>
<tr>
<td>start date:</td>
<td><div>02/02/2002</div></td>
</tr>
<tr>
<td>end date:</td>
<td><div>02/02/2002</div></td>
</tr>
</table>
i wonder is there a way to convert all those inputs to divs may be via using .replace or something else ?
thanks
Try this:
$('#calc').clone().appendTo('#lightbox');
$('#lightbox input').replaceWith(function() {
return $('<div>' + $(this).val() + '</div>');
});
jsfiddle - http://jsfiddle.net/infernalbadger/c9Rub/2/
Updated to include copying the content to another div with the ID lightbox.
Assuming that you are not using any libs:
Here http://www.w3schools.com/jsref/dom_obj_all.asp, you can find some useful functions to do this.
By getting the input elements that you need, something like this:
var inputs = document.getElementsByTagName('input');
You can replace them with this:
//pseudo
for each input element
var parentNode = input.parentNode;
parentNode.removeChild(input);
parentNode.innerHTML('<div>' + input.value + '</div>');
In the link that I put above, you can find some functions either to replace child or either to findParent, remove the current child and then append your div by yourself.
If you are using jquery you can do the following.
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$("#btnChange").click(function () {
$("#calc :input").each(function () {
this.outerHTML = "<div>" + this.value+ "</div>";
});
});
});
</script>
<div id="calc">
<table>
<tr>
<td>Principal:</td>
<td><input value="100.00$" /></td>
</tr>
<tr>
<td>start date:</td>
<td><input value="02/02/2002" /></td>
</tr>
<tr>
<td>end date:</td>
<td><input value="02/02/2002" /></td>
</tr>
</table>
</div>
<input type="button" id="btnChange" value="Change" />
I need to implement the following functionality in JavaScript/jQuery and its driving me nutts. I have an idea how I can implement this using lots of ids. However, I need to implement this using classes because these will be dynamic and it doesn't make sense to have a different id for every row.
Take the following table as an example:
<table>
<thead>
<tr>
<th><input type="checkbox" name="Names" value="CheckAll" /></th>
<th>Name</th>
<th>Surname</th>
<th>Location</th>
</tr>
<tr>
<td><input type="checkbox" name="Names" value="Name1" /></td>
<td>John</td>
<td>Doe</td>
<td class="changable"><span class="location">UK</span></td>
</tr>
<tr>
<td><input type="checkbox" name="Names" value="Name2" /></td>
<td>Jayne</td>
<td>Doe</td>
<td class="changable"><span class="location">Scotland</span></td>
</tr>
</thead>
</table>
if the checkbox of John Doe is checked, I need to show the CHANGE span for the respective clicked checkbox. Therefore, I need to add this element using jQuery. The following will be the result:
<table>
<thead>
<tr>
<th><input type="checkbox" name="Names" value="CheckAll" /></th>
<th>Name</th>
<th>Surname</th>
<th>Location</th>
</tr>
<tr>
<td><input type="checkbox" name="Names" value="Name1" checked="checked" /></td>
<td>John</td>
<td>Doe</td>
<td class="changable"><span class="location">UK</span> <span class="defaultLocation">Change</span></td>
</tr>
<tr>
<td><input type="checkbox" name="Names" value="Name2" /></td>
<td>Jayne</td>
<td>Doe</td>
<td class="changable"><span class="location">Scotland</span></td>
</tr>
</thead>
</table>
if the CHANGE span is clicked, I need to show the textbox for respective checkbox clicked. The following table will be the result:
<table>
<thead>
<tr>
<th><input type="checkbox" name="Names" value="CheckAll" /></th>
<th>Name</th>
<th>Surname</th>
<th>Location</th>
</tr>
<tr>
<td><input type="checkbox" name="Names" value="Name1" checked="checked" /></td>
<td>John</td>
<td>Doe</td>
<td class="changable"><span class="location">UK <input type="text" /></span></td>
</tr>
<tr>
<td><input type="checkbox" name="Names" value="Name2" /></td>
<td>Jayne</td>
<td>Doe</td>
<td class="changable"><span class="location">Scotland</span></td>
</tr>
</thead>
</table>
If the John Doe checkbox is unchecked, the respective row is reverted back without the textbox and without the change span, like the first table
If more than one checkbox is clicked, the second, third and so on rows need to follow the same procedure without losing the functionality from previously clicked checkboxes.
If the CheckAll checkbox is clicked from the table header, then all rows must follow the procedure mentioned above.
I need to hear your opinions on the best practices on how to achieve this. I know the logic of it but I can't manage to program it with JavaScript and jQuery. For instance, with jQuery, when you store an element in a string so you can manipulate it with plain JavaScript, then you don't have simple access anymore to the DOM.
Any help would be greatly appreciated
Try this:
$(".myClass").click(function(){
if(this.checked){
var changeElement = getChangeElement()
$(this).parents('tr').children('.changable').append($(changeElement))
attachEventsToCHANGE()
}else{
$(this).parents('tr').children('.changable .defaultLocation').remove()
}
})
function getChangeElement(){
var changeElement= $("<span class='defaultLocation'>Change</span>")
$(changeElement).click(function(){
$(this).after("<input type='text' />")
$(this).remove()
})
return changeElement;
}
I havent tested it but I think it would help you!!
You could probably bind to the "changed" Event of all checkboxes. Within the Eventhandler you could probably do something along the lines of
function changeHandler(event) {
if ($(this).val('checked') == checked) {
$(this).parents('tr').children('.changeable').append('<span>bla<span>');
} else {
$(this).parents('tr').children('.defaultLocation').remove();
}
The click handler of the "Change" Span should be pretty straight forward.
I wish to get the number of all TR elements that have a input element in them somewhere. How should I proceed ?
Html :
<tbody>
<tr>
<td>Ignore this item 1</td>
</tr>
<tr>
<td>Ignore this item 2</td>
</tr>
<tr>
<td><input blablabla>... Include this TR...</td>
</tr>
</tbody>
Thanks!
$('tr:has(input)').length
I have a table with a few rows... I want to be able to select a row and click on modify and I should be able to make all the cells of that row editable...
How would I make a cell editable in Javascript? And is it better to use Jquery?
There's no need to do your own code, a plugin for jQuery for this very purpose exists already. Try jEditable, it can do exactly what you need.
Their demo page has some nice examples:
http://www.appelsiini.net/projects/jeditable/default.html
Setcontent-editable property of each element you want to edit.
http://html5demos.com/contenteditable
Here's a quick concept I just worked up for you:
$(function(){
$("button[name='doModify']").click(function(){
// disable out modify button
$(this).attr("disabled","disabled");
// enable our save button
$("button[name='save']").removeAttr("disabled");
// cycle through each row having marked for modification
$(":checkbox[name='modify']:checked").each(function(){
$(this).closest("tr").find("td:gt(0)").each(function(){
// convert each cell into an editable region
$(this).wrapInner("<textarea name='"+$(this).attr("rel")+"'></textarea>");
});
});
});
});
--
<table border="1" cellspacing="1" cellpadding="5">
<tbody>
<tr>
<td><input type="checkbox" name="modify" /></td>
<td rel="username[]">jon.doe</td>
<td rel="information[]">This is my bio.</td>
</tr>
<tr>
<td><input type="checkbox" name="modify" /></td>
<td rel="username[]">jonathan.sampson</td>
<td rel="information[]">This is my bio.</td>
</tr>
<tr>
<td><input type="checkbox" name="modify" /></td>
<td rel="username[]">yellow.05</td>
<td rel="information[]">This is my bio.</td>
</tr>
<tr>
<td colspan="3" align="right">
<button name="doModify">Modify</button>
<button name="save" disabled="disabled">Save</button>
</td>
</tr>
</tbody>
</table>
You can insert textboxes inside each cell and set the values to be that of the table cell.
Something like this
$(function(){
$("#tbl1 tr").click ( function(){
if ( !$(this).hasClass('clicked') )
{
$(this).children('td').each ( function() {
var cellValue = $(this).text();
$(this).text('').append ( "<input type='text' value='" + cellValue + "' />" );
});
$(this).addClass('clicked');
}
});
});
<table id="tbl1">
<tr>
<td>1</td>
<td>4</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
You can then place an update button and fetch the values from the textboxes and update.