I have this Jquery code that is supposed to give me the result of a column if I click on it's row. I'm using Yii but the problem is mostly with the Jquery.
$(document).on('click', 'td.myLink a', function(){
$('input[name=\"ECCategory[ParentID]\"]').val($('#mainID').html());
$('.search-form form').submit();
});
This is what I have. What this does is gives me the result of the first row (mainID column) no matter which row I click on. What I want for example is to click on row 5 and get the mainID for row 5.
IDs are unique. So only one element can have the id mainID. You probably want to use $(this) within your click event to search from the selected element. For example:
$(function($){
$('td.myLink a').click(function(){
var tr = $(this).parent().parent(); // selected row
// get columns that you want from selected row using tr.find('...')
// ...
}
});
Related
I have two tables that are placed side by side and i would to append selected row on the first table to the second tab
i managed to get the data from a selected row and convert it to an array. I tried using the v-bind tag to bind the data values in the second table and its not working
I expect to click a row in a table and that row is added to another table that is just placed on the side of the other table
What I understood from you question is that you are looking for a jquery code that makes the rows from the two tables to move from one table to the other whenever the user clicks on a row in any of the tables.
for example if you click on a row in first table, it moves to the second table and if you click on a row in second table, it moves to the first table.
if it is so, then the jquery code could be:
// identify the two tables with IDs for easier access
var tbl1=$('#table_1_id'), tbl2=$('#table_2_id');
// use tbody selector to make sure that you don't bind this event to table heading rows
$('#table_1_id,#table_2_id').find('tbody tr').on('click', moveRow);
function moveRow() {
// find on which table this row is
var row = $(this);
var table_current = row.closest('table');
// If current table ID equals to first table ID then it means we are in first table
if (table_current.prop('id')==tbl1.prop('id')) {
// Then we move the row to second table
tbl2.find('tbody').append(row);
} else {
// The row was in second table so we move it to first table
tbl1.find('tbody').append(row);
}
return;
}
I have a table with several rows and a "Details" button in one column in each row.
I need to get the current table row of the clicked Details button. Every button has the same class and id.
Thanks for any help.
You can delegate a click event from the table to the button selector, and get the closest tr on click, as follows:
$("#yourTable").on('click', '.details-button', function(){
var $row = $(this).closest('tr');
});
You can use jQuery parent() to get the row element on button click.
$('.button').on('click',function() {
console.log($(this).parent());
})
Also don't use same id's on elements.
So I'm trying to get the data in my table row on click and create/update another table with the clicked information. The problem is I'm not sure how to pass the data. As of right now I can click on the table rows and get the events started and It looks like my second table is created as well but the information is not passed properly.
I appreciate it if someone can help me by telling me how I'm supposed to pass the information
$(document).on("click", "tr", function(HTMLTableRowElement){ // watch the whole document for when existing (or new) tr elements are clicked
//console.log("table row clicked!");
let tbody = $("#employee-Details tbody");
let fullNameTd= $('<tr>').text(HTMLTableRowElement.FirstName+' '+HTMLTableRowElement.LastName);
let hireDate= $('<tr>').text( moment((HTMLTableRowElement.HireDate)).format('MM/DD/YYYY'));
let fullAddress= $('<tr>').text(HTMLTableRowElement.AddressStreet+' '+HTMLTableRowElement.AddressCity+' '+HTMLTableRowElement.AddressState+' '+HTMLTableRowElement.AddressZip);
let salaryBonus = $('<tr>').text(' $ '+HTMLTableRowElement.SalaryBonus);
// append all table cells to a new row
let row = $('<tr>').append(fullNameTd).append(hireDate).append(fullAddress).append(salaryBonus); // create the row and append // all of the tr elements.
// replace the row on the table body
tbody.replaceWith(row);
In the click callback function you can pass in the event object. You are passing in HTMLTableRowElement and using it as a row element, which is incorrect. You can access the clicked row with $(this)[0], and inside the row you can access the individual cells.
Check out this plunker: link
For example to get the first and last name you need to get the first and second cell's text:
let fullNameTd = $('<tr>').text(thisRow.cells[0].innerText + ' ' + thisRow.cells[1].innerText);
Also the tbody.replaceWith(row); line will only work for the first time, because you are replacing the tbody with a row, so jquery will not find it for the second time. It's better to clear the tbody, and then append the row:
tbody.empty();
tbody.append(row);
When I execute the following to add a click function to the cell at the end of A particular row, jQuery adds the click function to all of the rows. What am I missing here please?
og_rownum happens to equal a number 3, not a string, and the nth-child(8) column does exist in the table.
$("#game_lister_table tr:eq("+og_rownum+"), :nth-child(8)").click(function(e){
alert('here');
e.stopPropagation();
});
Thanks in advance....
It seems like you want to add a listener to only one row on your table. If thats the case just add id="yourID" to the tag that you want to manipulate.
Then in jquery, select it with
$('#yourID').click(function(e){
//code here
});
If you don't know which row needs to be manipulated, and want to choose it programmatically, then try this.
$("#game_lister_table tr").click(function(e){
$(this)...//selects the row that was clicked
})
I used to to this code when choosing specific Cell/ Cells in HTML table Like You
$("#game_lister_table tr:eq("+og_rownum+"), :nth-child(8)").click(function(e){
alert('here');
e.stopPropagation();
});
But I found there is an easy way is to Create Dynamically Id for cell every time you create row or cell you have an Easy way to use JQuery Selector for any (row , cell ,....etc)
var table = document.getElementById("myTable");
var rowIndex =table.rows.length;
var row = table.insertRow();
var cell1 = row.insertCell(0);
cell1.id="whatEver";
cell1.innerHTML = "<input type="text" id="txt'+rowIndex+'" />";
then your action came Next
$('#ID').on('click',function(e){});
Since the closest answer was removed, I'll add this.
Use "#game_lister_table tr:eq("+og_rownum+") td:nth-child(8)" to select the element you described.
I am creating a dynamic table using java script and jquery, one of my project requirement is a select box in a row cell,
From the this SO link i am able to place a on click listener on a table row which gives me id of table row and cell(tr and td) but i am not able to detect select onchange i have also tried "jQuery get value of select onChange" but it is also not working in my case!!
My problem is
How to detect select on Change in a row cell as i have to update that
changed data in database?
thanks in advance!!!!!
I believe this will get everything you'll need for your database (value selected, cell and row it was selected in)... something like:
JSFiddle
$("td select").on("change", function() {
var value = this.value;
var $cell = $(this).parent();
var $row = $cell.parent();
alert("Selected ["+value+"] in cell ["+$cell.index()+"] of row ["+$row.index()+"]");
});
$(document).on('change','td',function(){
//Do your abacadabra!
});