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.
Related
I have a 5x5 table, with each cell containing a word. When I click on the word, I want the color of the cell to be updated to a pre-defined color. In the example below, a table is set up with the colors encoded - what I want is them to be white until their corresponding word is clicked.
<TABLE BORDER="4" CELLSPACING="4" CELLPADDING="4">
<TR>
<TD BGCOLOR="#ffff00">Yellow</TD>
<TD BGCOLOR="#00ff00">Green</TD>
</TR>
<TR>
<TD BGCOLOR="#ff00ff">Purple</TD>
<TD BGCOLOR="00ffff">Blue</TD>
</TR>
</TABLE>
Using jQuery you could do this:
$('table td').on('click', function() {
$(this).attr("bgcolor", $(this).attr("data-color"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<TABLE BORDER=4 CELLSPACING=4 CELLPADDING=4>
<TR>
<TD data-color="#ffff00">Yellow
<TD data-color="#00ff00">Green
</TR>
<TR>
<TD data-color="#ff00ff">Purple
<TD data-color="00ffff">Blue
</TD>
</TR>
</TABLE>
For a larger project I'd recommend selecting the table by ID.
If you want to use vanilla Javascript you can add a simple onClick event listener and set the color. The color would need to be stored in a data-bgcolor attribute.
const tableCells = document.querySelectorAll('TD')
tableCells.forEach( function (cell) {
cell.addEventListener('click', function (e) {
e.target.style.backgroundColor = e.target.dataset.bgcolor;
})
})
<TABLE BORDER=4 CELLSPACING=4 CELLPADDING=4>
<TR>
<TD data-bgcolor="#ffff00">Yellow</TD>
<TD data-bgcolor="#00ff00">Green</TD>
</TR>
<TR>
<TD data-bgcolor="#ff00ff">Purple</TD>
<TD data-bgcolor="#00ffff">Blue</TD>
</TR>
</TABLE>
I have a jquery datatable that contains multiple columns and rows as below.
<table>
<thead>
<tr>
<td>Name</td>
<td>Class</td>
<td>Action</td>
<td>Score</td>
<td>Corrected Score</td>
</tr>
</thead>
<tbody>
<tr>
<td>Student1</td>
<td>Math</td>
<td>Add 5
</td>
<td>73</td>
<td>
<input type="text" id="1_final_score" />
</td>
</tr>
<tr>
<td>Student2</td>
<td>Biology</td>
<td>Add 5
</td>
<td>84</td>
<td>
<input type="text" id="2_final_score" />
</td>
</tr>
<tr>
<td>Student3</td>
<td>History</td>
<td>Add 5
</td>
<td>50</td>
<td>
<input type="text" id="3_final_score" />
</td>
</tr>
</tbody>
When i click on the "Add 5" link, I want to add 5 to the score in the corresponding row and insert the result in the final score input field. I have tried using the jquery row-select feature, but am unable to figure out how to accomplish the above.
$(document).ready(function () {
$('table').find('a').click(function () {
var original = parseInt($(this).parents('tr').find('td:nth-child(4)').text()) + 5;
$(this).parents('tr').find('input[type=text]').val(original);
});
});
You can try this:
$(document).ready(function(){
$("a").on("click", function(){
var num=parseInt($(this).closest("td").next("td").text());
num=num+5;
$(this).closest("td").next("td").text(num);
$(this).closest("tr").find("input").val(num);
});
});
FIDDLE
Try with this
$('a:contains("Add 5")').click(function(){
$(this).parents('tr').find('td input:text').val(+$(this).parent().next('td').text() + 5 )
});
FIddle : http://jsfiddle.net/2n0bevxo/172/
I have a table that I want to give the user the ability to select. I added an button, value="Update", to the beginning of the row, and assigned an onclick value. My problem is that I want to send other items(in td>s on the same row) from the row to the function called by the button.
How do I get the information from the row the button is on? I would like to pass the "Name" and "Last Update Time" to the function the button calls. I tried using the following:
$("#Report input[name=btn_id]").closest('td').attr('text')
but it returns "undefined," which I am not surprised by, as I think this is due to it not knowing what row of the table to pull from.
Here is a view of the table:
Here is the code behind the table:
<table align="center" border="1" class="report" id="report">
<thead>
<tr>
<th width="75">Update</th>
<th width="500">Name</th>
<th width="50">Info</th>
<th width="100">location</th>
<th width="100">Last Update Time</th>
</tr>
</thead>
<tbody>
<tr class="parent" id="other_app">
<td align="center">
<input type="button" name="btn_id" value="Update" onclick="UpdateRec(d1)">
</td>
<td name="App_Name">Test1</td>
<td align="center">None</td>
<td align="center">Desktop</td>
<td align="center">2014-06-30 18:22:39</td>
</tr>
<tr class="parent" id="other_app">
<td align="center">
<input type="button" name="btn_id" value="Update" onclick="UpdateAppRec(d1)">
</td>
<td name="App_Name">Test1</td>
<td align="center">None</td>
<td align="center">Server</td>
<td align="center">2014-03-30 16:20:15</td>
</tr>
</tbody>
Any help would be appreciated.
Embrace the power of this.
Using:
onclick="UpdateRec(this)"
..in your function:
function UpdateRec(el) {
var targetRow = $(el).parents('tr')
...
}
Using this passes a reference to the clicked element. You can then use jQuery to select the parent table row. From there you can use .find() to select anything in that row.
Another way to do this would be to use HTML5 data- attributes on this button itself:
<input type="button" name="btn_id" value="Update" onclick="UpdateRec(d1)" data-appName="something" />
In the same function you can then use $(el).data('appName') to get the value directly without looking up values in other DOM elements.
//Add a click listener on all your buttons using event delegation
$('#Report').click(onUpdateButtonClicked, 'input[name=btn_id]');
function onUpdateButtonClicked() {
var rowValues = $(this)
.parent() //select parent td
.nextAll() //select all next siblings of that parent td
.map(function () { //loop through the tds, collecting their text value
return $(this).text();
}).get(); //return the result as an array
//do what you want with rowValues
}
I would suggest you to use common class for all update buttons with common click event handler.
Here is the fiddle: http://jsfiddle.net/jwet6z6x/
HTML:
<table align="center" border="1" class="report" id="report">
<thead>
<tr>
<th width="75">Update</th>
<th width="500">Name</th>
<th width="50">Info</th>
<th width="100">location</th>
<th width="100">Last Update Time</th>
</tr>
</thead>
<tbody>
<tr class="parent" id="other_app">
<td align="center">
<input class="updateBtn" type="button" name="btn_id" value="Update">
</td>
<td name="App_Name">Test1</td>
<td align="center">None</td>
<td align="center">Desktop</td>
<td align="center">2014-06-30 18:22:39</td>
</tr>
<tr class="parent" id="other_app">
<td align="center">
<input class="updateBtn" type="button" name="btn_id" value="Update">
</td>
<td name="App_Name">Test1</td>
<td align="center">None</td>
<td align="center">Server</td>
<td align="center">2014-03-30 16:20:15</td>
</tr>
</tbody>
Javascript:
$(".updateBtn").click(function(){
var name = $(this).parent().parent().find('td').eq(1).html()
var time = $(this).parent().parent().find('td').eq(4).html()
alert (name);
alert (time);
})
I would do as follow : http://jsfiddle.net/Lk91cpup/2/
<table>
<tr id="row_1">
<td>
<input type="button" id="btn_row_1" class="btn" value="Update">
</td>
<td id="text_row_1">Test1</td>
<td>None</td>
<td>Desktop</td>
<td >2014-06-30 18:22:39</td>
</tr>
<tr id="row_2">
<td>
<input type="button" id="btn_row_2" class="btn" value="Update">
</td>
<td id="text_row_2">Test2</td>
<td>None</td>
<td>Server</td>
<td>2014-03-30 16:20:15</td>
</tr>
</table>
And Javascript
$(document).ready(function(){
$(".btn").click(function(){
var id = this.id.substring(this.id.lastIndexOf("_") + 1);
alert($("#text_row_" + id).text());
});
});
<tr class="parent" id="other_app">
<td align="center">
<input type="button" name="btn_id" value="Update" onclick="UpdateRec(d1, 'Test1', 'None', 'Desktop', '2014-06-30')">
</td>
<td name="App_Name">Test1</td>
<td align="center">None</td>
<td align="center">Desktop</td>
<td align="center">2014-06-30 18:22:39</td>
</tr>
Since you have already written a javascript function call why not just include the things you need right?
This is simplier but not the best practise.
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
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" />