Read table cell by javascript - javascript

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.

Related

How to update a row where checbox is checkbox is ticked - jquery

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");

Highlighting row of a HTML table which is populated using AJAX return data

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
});

How to retrieve column data from Footable

We have a Footable in our page with some data, and one column has a delete row button, working as expected.
Problem is, when deleterow is pressed, we want to retrieve from the column a value, to do some process with it.
Example:
ID -- Name -- Delete
--------------------
01 -- John -- Delete
02 -- Doe -- Delete
When I press delete on second row, I want to retrieve this value, to search on an array, and delete it from there too, and to pass as parameter to an Ajax call.
I readed something like data-value but don't know how to get it. On delete row, there is a code like this:
$('table').footable().on('click', '.row-delete', function(e) {
e.preventDefault();
//get the footable object
var footable = $('table').data('footable');
//get the row we are wanting to delete
var row = $(this).parents('tr:first');
//delete the row
footable.removeRow(row);
});
I know row has the data, but don't know/understand how to extract the column I need.
Regards and thanks.
You can get at the columns in the TR as TD elements
eg
var columns = $('td',row); // all the TD elements in the row
You can get at individual columns by index (0-based) eg
var someColumn = $('td',row)[1];
Or if the column you are intersted in has a class eg:
var someColumn = $('td.someclass',row);

Getting Value from GridView Input Control using JavaScript

i am using Asp.Net Grid View Control having Template Field Columns. Which have Asp.Net Literal,TextBox and CheckBox Controls. I want to add each row Received Amount value when checkbox is Checked in each row. Below is my GridView.
I have accessed the Received Amount columns by JavaScript, but it gives me the whole Textbox in Alert
I want to get Value of that Textbox having Id=txtFeeRecAmount, not whole Control..
Below is my Script..
<script type="text/javascript">
function AddAmount(lnk) {
var row = lnk.parentNode.parentNode;
var rowIndex = row.rowIndex;
alert(rowIndex);
var amount = row.cells[2].innerHTML;
alert(amount);
}
</script>
Any Help, I want to get Value of Received Amount Column, when the CheckBox is checked.
As, there can be multiple textboxes. there you need to get the current value by
using jquery, this should work;
var amount = $(row.cells[2]).find('input').val();
As you tagged this question with jQuery I assume you are using it:
I want to get Value of that Textbox having Id=txtFeeRecAmount
$("#txtFreeRecAmount").val();

how to get a particular cell value from dynamic table using javascript

I have a table showing records from database. There is a dropdown for selecting a particular user in each row. On change, it should show the corresponding values of the new user.
When I'm selecting a particular user from the dropdown, it should match the col1 and col2 value with the user selected and return col3 value. What I want is to get the col1 and col2 value of that particular row. How can I do it ? Please help me.
You want to use live('click', function(). This will apply on dynamically created elements.
For example, you may try something like;
$('#your_table_id .some_class_in_a_row_to_click').live('click', function(){
$(this).siblings().each(function(){
var column = $(this).find('.some_class_for_column_with_data');
var data = column.text();
alert(data);
});
});
You may apply this on a table having some columns. Clicking on some column with class some_class_in_a_row_to_click will alert text on another column in that row having class some_class_for_column_with_data

Categories

Resources