How can I perform the following action using jquery?
I have a table with three rows and a header row. something like this:
<%# Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<dynamic>" %>
<%# Import Namespace="MyModel.Model" %>
<div>
<table id="MyTable">
<tr>
<th>
Select1
</th>
<th>
Select2
</th>
<th>
Text1
</th>
</tr>
<tr>
<td>
<select name="Select1"></select>
</td>
<td>
<select name="Select2"></select>
</td>
<td>
<input name="Input1"/>
</td>
</tr>
</table>
</div>
I want to clone the last row of this table, remove all rows but header row, append the cloned row(last row) and hide it(cloned row).
I know how to perform these actions separately.
$("#MyTable tr:last").clone()
$("#MyTable tr>td").remove()
$("#MyTable tr:last").appendTo('#MyTable tr:first')
$("#MyTable tr:last").hide()
I am struggling with appending the cloned row after removing all rows(but the header).
Any help would be appreciated.
You need to keep a reference to the cloned row:
var $lastrow = $("#MyTable tr:last").clone();
// removes actual tr's, but not the headers
$("#MyTable tr > td").parent().remove();
$lastrow
.appendTo('#MyTable')
.hide();
Related
I'm using html5 and jquery to set up a dynamic table, until then I can add the elements to the table without problems, but I can not retrieve the value of its columns. so I have the following questions:
How can I recover the table data by clicking the ROW?
Should I always use the data-name, id for example as in the first
line ?
$(document).on("change", "#TabClientesAdicionados", function(e) {
alert('?');
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<hr>
<table id="TabClientesAdicionados" class="table table-hover">
<thead>
<tr>
<th> ID </th>
<th> Name </th>
<th> Actions </th>
</tr>
</thead>
<tbody>
<tr>
<td data-id="Bruno">1</td>
<td data-nome="Bruno">Bruno</td>
<td>Details</td>
</tr>
<tr>
<td>2</td>
<td>Josep</td>
<td> Details </td>
</tr>
</tbody>
</table>
How can I recover the table data by clicking the ROW?
You can bind the click event to your TR elements and get the information.
Should I always use the data-name, id for example as in the first line?
Yes, because you don't want the parsed HTML to manipulate data. The data attributes are a better approach to keep related data (no HTML) to DOM elements.
Look at this code snippet
This approach binds the click event to TR elements
$('#TabClientesAdicionados tbody tr').click(function() {
var data = { name: '', id: '' };
$(this).children('td').each(function() {
var name = $(this).data('nome');
if (name) {
data.name = name;
}
var id = $(this).data('id');
if (id) {
data.id = id;
}
});
console.log(data);
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<hr>
<table id="TabClientesAdicionados" class="table table-hover">
<thead>
<tr>
<th> ID </th>
<th> Name </th>
<th> Actions </th>
</tr>
</thead>
<tbody>
<tr>
<td data-id="Bruno_1">1</td>
<td data-nome="Bruno">Bruno</td>
<td>Details</td>
</tr>
<tr>
<td>2</td>
<td>Josep</td>
<td> Details </td>
</tr>
</tbody>
</table>
I would do as the following snippet.
You need to bind the event to the row tr ant then get each of its children.
By adding a data attribute you could set a column name. This could also help if you eventually needed to extract the value of an specific cell.
Incidentally you could also add a second data attribute named like data-value or something similar- This in case you are worried that your parsed html content might cause you trouble with the values.
$(document).ready(function() {
$("#mytable").on('click', 'tr', onCellClick);
//Bind the event to the table row
function onCellClick() {
let row = $(this); //get the jquery Object for the row
let rowValues = {}; //An empty object to hold your data
let temp;
//extract the value of every cell in the row
//Doing it this way gives you flexibility on the amount of colums you have
row.find('td').each(function(item) {
temp = $(this);
rowValues[temp.data('column')] = temp.text();
//this could be changed to
//rowValues[temp.data('column')] = temp.data('value);
//if you desire to use a separate data-value property
});
console.log(rowValues);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table style="width:100%" id="mytable">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td data-column="name" data-value="Jill">Jill</td> <!-Adding value property-->
<td data-column="lastname">Smith</td>
<td data-column="age">50</td>
</tr>
<tr>
<td data-column="name">Eve</td>
<td data-column="lastname">Jackson</td>
<td data-column="age">94</td>
</tr>
</table>
I have a table with four columns. The first two columns are hidden. I want to get the values of the second and third columns on row click. I can get the value of the third column using the below code. But how can I get the value of the hidden column?
$('body').on( 'click','#item-grid table tbody tr', function() {
$('#PurchaseOrder_supplier_name').val($(this).children(':nth-child(3)').text());
});
Below is the table html.
<table class="table table-bordered table-condensed table-hover table-striped dataTable">
<thead>
<tr>
<th id="item-grid_c0" style="display:none">Supplier ID</th>
<th id="item-grid_c1" style="display:none">Supplier ID</th>
<th id="item-grid_c2"><a href="/builders_common/index.php?r=purchase/purchase/multipurchaseorderdetailview&PurchaseOrder%5Bvoucher_no%5D=12&PurchaseOrderDetails%5Bpurchase_voucher_no%5D=12&PurchaseOrderDetails%5Bproject_id%5D=45&PurchaseOrderDetails%5Bitem_id%5D=79&ajax=item-grid&sort=supplier"
class="sort-link">Supplier</a>
</th>
<th id="item-grid_c3"><a href="/builders_common/index.php?r=purchase/purchase/multipurchaseorderdetailview&PurchaseOrder%5Bvoucher_no%5D=12&PurchaseOrderDetails%5Bpurchase_voucher_no%5D=12&PurchaseOrderDetails%5Bproject_id%5D=45&PurchaseOrderDetails%5Bitem_id%5D=79&ajax=item-grid&sort=item"
class="sort-link">Item</a>
</th>
<th id="item-grid_c4"><a href="/builders_common/index.php?r=purchase/purchase/multipurchaseorderdetailview&PurchaseOrder%5Bvoucher_no%5D=12&PurchaseOrderDetails%5Bpurchase_voucher_no%5D=12&PurchaseOrderDetails%5Bproject_id%5D=45&PurchaseOrderDetails%5Bitem_id%5D=79&ajax=item-grid&sort=rate"
class="sort-link">Rate</a>
</th>
</tr>
</thead>
<tbody>
<tr class="odd selected">
<td style="display:none">
<input type="hidden" id="ProjectPurchaseOrderSupplierwise_item_id_5" name="ProjectPurchaseOrderSupplierwise[item_id_5]" value="79" class="gridfield">
</td>
<td style="display:none">
<input type="hidden" id="ProjectPurchaseOrderSupplierwise_supplier_id_5" name="ProjectPurchaseOrderSupplierwise[supplier_id_5]" value="14" class="gridfield">
</td>
<td>General</td>
<td>Cement</td>
<td>
<input type="text" id="ProjectPurchaseOrderSupplierwise_rate_5" name="ProjectPurchaseOrderSupplierwise[rate_5]" value="50.00" readonly="readonly" class="gridfield">
</td>
</tr>
</tbody>
</table>
Try like below.
$('body').on( 'click','#item-grid table tbody tr', function() {
$(this).find('td:eq(1) input').val(); // 2nd column
$(this).find('td:eq(2)').text(); // 3rd column
});
You can use either of the two :eq() Selector or :nth-child() Selector.
https://api.jquery.com/nth-child-selector/
https://api.jquery.com/eq-selector/
Click here
Example code with your HTML
To get a specific cell by index, you can use :
$(this).find('td:nth-child(2) input').val(); // 2nd column
$(this).find('td:eq(1) input').val(); // 2nd column
$(this).find('td:nth-child(3)').text(); // 3rd column
$(this).find('td:eq(2)').text(); // 3rd column
$('#PurchaseOrder_supplier_name').val($(this).children(':nth-child(3):visible').text());
I am trying to append data to a table, that gets selected using jquery. The problem is, this table may have nested tables within it. What happens is that when I append the data, not just the parent table's tbody gets appended but so too does all the children tables tbody. Here is my code:
var template = window.app.getTemplate('myTemplate');
var image = {id: imageId, name: imageName, imageList: imageTypes, extension: ext, thumbNail: thumbNailPath};
$("#MyTable tbody:first").append(template(image));
Where myTemplate is set up like this:
<tr>
<td>
<table>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>
</td>
<tr>
</tr>
<td></td>
</tr>
and MyTable is set up like this:
<table id="MyTable" data-attr="images">
<thead>
</thead>
<tbody>
</tbody>
</table>
Like I said, when the append happens, if there is more than one table within tbody, all tbody's get appended to. So, how do I select only the first?
thanks
JQuery uses the CSS selectors to reach the element.
$("#MyTable > tbody:first")
E > F Matches any F element that is a child of an element E.
See more at http://www.w3.org/TR/CSS2/selector.html#child-selectors
Maybe if you update your jquery selector
$("#MyTable > tbody:first")
Try:
$("#MyTable > tbody").append(template(image));
I have a following (simplified) table structure:
<table class="form-table">
<tbody>
<tr>
<tr><--Need to select and add class on this guy based on h3 class "check"-->
<th scope="row">
<h3 class="check">Default Checbox:</h3>
</th>
<td>
</tr>
</tbody>
</table>
So i want to select "table row" above the h3 class "check". Table is generated dynamically so i can't just use :eq() ,:gt() or :lt().
To select this guy i am using this code:
$('tbody tr').find('h3.check').parent().addClass('cool');
$('.cool').parent().addClass('until');
But the problem is that i am giving an unnecessary class "cool" in order to make a selection.
<table class="form-table">
<tbody>
<tr>
<tr>
<tr class="until"><--Class successfully added but..-->
<th class="cool" scope="row"><--An extra Class in order to select "table row"-->
<h3 class="check">Default Checbox:</h3>
</th>
<td>
</tr>
</tbody>
</table>
Is there a better way for doing this (without adding unnecessary Class) ?
You can use .has()
$('tbody tr').has('h3.check').addClass('cool');
or :has
$('tbody tr:(h3.check)').addClass('cool');
I have a table as follows. I need to give background color(yellow) only to the first header column. Also all the text color should be blue in the header (for both columns). What are the ways to achive it using jQuery?
Note: I am trying to learn jQuery. Hence the solution should be using jQuery.
<table id = "myTable">
<thead>
<tr>
<th>
Name
</th>
<th>
Address
</th>
</tr>
</thead>
<tr>
<td>
Lijo
</td>
<td>
India
</td>
</tr>
</table>
$("#myTable th:first").css({
"background-color": "yellow"
});
$("#myTable th").css({
"color": "blue"
});
You can also achieve the same in one line:
$("#myTable th")
.css({"color": "blue"})
.filter(":first")
.css({"background-color": "yellow"});
You can select the first header column like so:
var firstColumnHeader = $('#myTable thead th:first-child');
and then you can update the background colour by using the css method, like so:
firstColumnHeader.css('background', '#FCD116');
Here is a jsfiddle demostration.
Hiya demo http://jsfiddle.net/r3jMv/1/ (updated) (old =>) http://jsfiddle.net/Zarhu/2/
and with blue color here: http://jsfiddle.net/r3jMv/6/ another updated version from below comment: http://jsfiddle.net/cC6hk/
following should do the trick.
this might be good play ground: http://vkanakaraj.wordpress.com/2009/06/18/select-a-column-of-a-table-using-jquery/
jquery code
$(function(){
// Change first column background color.
$("table thead tr th:first-child").css("background-color","#ff0000");
});
$("#myTable > thead > tr >th").css("background-color","yellow");
html
<table id = "myTable">
<thead>
<tr>
<th>
Name
</th>
<th>
Address
</th>
</tr>
</thead>
<tr>
<td>
Lijo
</td>
<td>
India
</td>
</tr>
</table>
This is for the first header where class name should do all the styling.
The selector gets the all the "th" inside the #mytable and using the eq(0) bring the first th and add to it the class
$("#myTable th").eq(0).addClass("ClassName")
This for all the header where class name 2 should do the styling you
$("#myTable th").addClass("ClassName2")