I want to update certain rows where checkboxes are ticked. I am able to get the rows every cells content but not able to update them.
I'm trying to update 7th cell's content like this:
$.each($("input[name='eachSelector']:checked").parents("tr"), function () {
$(this).find('td:eq(7)').innerText = "this is modified";
});
I am able to get all the cells values of the checked rows like this below values is an array.
$.each($("input[name='eachSelector']:checked").parents("td").siblings("td"), function () {
values.push($(this).text());
});
how to update the cells values and add some css to it
You have an error in your code. You are trying to use a DOM method on a jquery object. You should change this line
$(this).find('td:eq(7)').innerText = "this is modified";
to
$(this).find('td:eq(7)').text("this is modified");
Related
I created table with several columns, one column with textarea field and one with button to save textarea value.
First thing I want to read textarea field. I use this code
<script>
$(document).ready(function(){
// code to read selected table row cell data (values).
$("#myTable").on('click','.btnSelect',function(){
// get the current row
var currentRow=$(this).closest("tr");
var colT=currentRow.find("td:eq(7)").text(); // OR
var colTa=currentRow.find("textarea").text();
alert(colT + colTa);
});
});
</script>
Anyway I receive the original value from table, but I need new or updated value.
Im using Datatables from https://datatables.net.
One of the columns on the datatable has a dropdown combobox as cell data.
When I push a button, I need to get the selected value of the combobox inside the selected row.
$.each($("#prize_selector tr.selected"), function () {
var row = prizes_table.row(this).data();
row[3].$('select').options[row[3].$('select').selectedIndex].id;
[...]
});
but no success. How can I access the DOM select inside the cell, without traversing all the input selects on the table? (there are a lot).
edit the console throws row[3].$ is not a function
I assume you're using Select extension to select rows.
Below is a correct way to access select element for each selected row:
table.rows({ selected: true }).every(function(){
var $select = table.$('select', this.node());
var $option = table.$('select option:selected', this.node());
console.log($select.val(), $option);
});
See this example for code and demonstration.
How to get row value of a table on mouse click? Data in this table is populated from the data returned using AJAX.
Below is the code which is not working:
$('table#tblBdy tbody tr').click(function() {
$('tr').click(function () {
var tableData = $(this).closest("tr").children("td").map(function() {
return $(this).text();
}).get();
$('#bx1txt').val($.trim(tableData[0]));
$('#bx2txt').val($.trim(tableData[1]));
$('#oldqty').val($.trim(tableData[1]));
});
I'm not sure I completely follow your question, your title and descriptions seem to conflict. Are you looking to get the value you a specific cell on click? Your question says you want the value of a row...
If I understand it correctly, you either want the value of a specific cell when it is clicked, or you want to highlight the row of that cell that you are clicking.
I have setup a codepen http://codepen.io/anon/pen/oXNeMx with a simple solution.
Depending on how the table is generated, you can put that javascript code into it's own function and call that function whenever you have new AJAX data so that the click handler gets bound to the table and elements.
//handles table cell click events
$('td').click(function(){
//updates the value
var cellValue = $(this).html();
//find the row of table where cell was clicked
var tr = $(this).closest('tr');
//removes select class from all rows
$(tr).siblings().removeClass('highlight');
//adds class to highlight selected row
tr.addClass('highlight');
});
The reason your code is not working is because you attach an event handler to some elements, but then you replace those elements with new ones from the AJAX call.
You need to set an event handler on an element that will not change, for example, the table (if you table gets replaced in its entirely, you need to find a higher ancestor that never changes).
// ancestor event real selector
$('#tblBdy').on('click', 'tbody td', function() {
// Same code as yours in the handlers
});
I am working with some custom ajax functionality using Telerik's MVC Grid and I am trying to hide/remove child elements of a cell based on specific criteria, I found a similar question here: Telerik MVC Grid making a Column Red Color based on Other Column Value but couldn't get it working right.
Basically when the row is databound in the grid this event fires:
function onRowDataBound(e) {
if (e.dataItem.Status == "Submitted") {
$.each(e.row.cells, function (index, column) {
alert(column.innerHTML);
//var $header = $(column).closest('table').find('th').eq($(column).index());
//if(header text == "Actions)
//{
//Get the <a> child elements in the 'Actions' column whose class contains t-grid-Edit,
//t-grid-edit, t-grid-Delete, or t-grid-delete and set their display to none, add a css class, and remove the element entirely
//}
}
}
}
So far it's working in that I can get and iterate through each column in the row, but I am not sure what to do at this point, I found this How can I get the corresponding table header (th) from a table cell (td)? to check to make sure the column name name is Actions, but I couldn't get it working. I am not sure how to convert the javascript HTMLTableCellElement object into a jQuery object so I can use syntax I am more familiar with.
Here is what I need to do after that:
Get the child elements in the 'Actions' (has to go by column header name instead of cell index because the number of columns can change) column whose class
contains t-grid-Edit, t-grid-edit, t-grid-Delete, or t-grid-delete
Take those elements and (each of these actions would be used on different pages using similar setups):
a. Set the element's display style to none
b. Add a class to the element of name "Hidden"
c. Remove the element from the code entirely
How can I put the above functionality into my onRowDataBound function?
Thank you SO =).
I was able to figure this out with a lot of playing:
function onRowDataBound(e) {
if(e.dataItem.Status == "Submitted"){
var $row = $(e.row);
$.each($row.children("td"), function (index, column) {
var $column = $(column);
var $headerText = $column.closest('table').find('th').eq($column.index()).children(".t-link").text();
if ($headerText == "Actions") {
$.each($column.children("a.t-grid-delete, a.t-grid-Edit"), function (subIndex, link) {
$(link).remove();
});
}
});
}
}
I'm having trouble figuring out how to do a simple Javascript task on fields in a table created with Rails 3.
My table has characteristic rows that the user adds using a form below (which updates the database and reloads the table partial).
The number of columns in the table is based on the number of attributes submitted in a different form. No matter how many columns are in a row, there is also a Total column after them. Each cell in the table has a text_field input, with an ID that is based on the row object id and the column object id.
What I'm trying to do is create an OnChange event for each of those cells, so that when a field value changes, the Total column gets updated with the total value in the text_field inputs of all cells in that row.
I don't know how to pass the Rails objects to Javascript (so I can cycle through the IDs), I can't figure out how to get the DOM element names and values if I use an action in the controller, and I don't know how to use RJS to do this either. Can anyone offer any help on how to do this? Thank you!
Sarah
If you use jQuery, you can set a class on the textboxes and listen to the change event on it.
example:
<input type="text" id="WhateverXXX" class="MyValue" />
<script type="text/javascript">
$(function(e) {
$('.MyValue').change(function(e) {
// update the total
});
});
</script>
In jQuery it'd be easy to iterate over all elements with the same class, so proper design of your document will help here.
Maybe something like this:
$('.thing_to_change').live('change', function() { retotal(); });
Your retotal function can be similar:
var total = 0;
$('.thing_to_change').each(function() { total = total + $(this).val() });