Scenario:
I'm using datatable library to display alot of information. That table have the following rows:
Id Type Name Case
What I'm looking for is that when I click the second row Type, that value will be taking and pasted in a textbox
Example
Id Type Name Case
1 text Juan 20001
3 List Pedro 20005
If I click the row that has the id # 1, I need to take the Type innerHTML. Does not matter what apart of the row I click just take the second td's html.
I tried with this code:
$("tr td").click(function () {
alert($(this).html());
})
It worked great, But the problem is that the user have to click exactly the row Name, but would be better if user can click over any of the row and just take the second rows html.
Suggesstions?
myRow.getElementsByClassName('td')[1].innerHTML
should get you the innerHTML of the second table cell of myRow as long as the first table cell does not contain a nested table.
You might try adding the click handler to the rows instead of to the cells too.
Try using eq()
but would be better if user can click over any of the row and just
take the second rows html.
$("tr td").click(function () {
secondrow = $(this).closest('tr').siblings().eq(1);
});
If i click the row that has the id # 1, i need to take the Type
innerHTML. Does not matter what apart of the row i click just take the
second td's html.
$("tr td").click(function () {
secondTd = $(this).siblings().eq(1);
alert(secondTd.html());
});
Try this
$(function () {
$("#thetable tr").click(function () {
if ($(this).index() == 0) return;
$('#tbox').val($('td:nth-child(2)', $(this)).html())
})
});
HTML
<table border="1" cellpadding="4" id="thetable">
<tr>
<td>Id</td>
<td>Type</td>
<td>Three</td>
<td>Four</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
</table><br />
<input type="text" name="tbox" id="tbox" />
It method takes into account the first row that contains only labels and doesn't set the textbox value to a label if top row is clicked.
Related
I want to select a value of my table by row and column position as below description.
This tables was used by appendTo method to .tbody selector and then I've got more rows as below I just show two of rows and each of rows I have .Open selector was used for user click to get a value on column number 4 by current position or index of that row.
Here HTML:
<table class"mytable">
<tbody class="tbody">
<tr>
<td>1</td>
<td>THB-PP-000001</td>
<td>1005-000001</td>
<td>100</td> //this is the column id I want to get it
<td><button type="button" class="open"> Open by Id </button></td>
</tr>
<tr>
<td>1</td>
<td>THB-PP-000001</td>
<td>1005-000001</td>
<td>101</td> //this is the column id I want to get it
<td><button type="button" class="open"> Open by Id </button></td>
</tr>
</tbody>
</table>
This is JS:
$(document).on("click", ".open", function () {
var inde = $("table tbody tr td:nth-child(4)").text();
console.log(inde);
});
Thank for help
Try to use .parent() along with .prev() to get your required data,
$(document).on("click", ".open", function () {
var inde = $(this).parent("td").prev().text();
console.log(inde);
});
If your html is having a tbody as a static node then you could use .tbody in the place of document.
I have a table with several <tr>s and each one has several <td>s. The content of these columns can be another html element (for example a textbox) or just text.
My question: how I can get the rest of the siblings of one clicked element inside this column? I mean, how I can know to which <tr> this element belongs, to <tr> #3 or <tr> #5?I don't have a index per <tr> to control
Example:
If I click the textbox of column #1 in row #5, I want that the content of column #2 in row #5 change. I don't know how to do it because my <tr> doesn't have an index.
Using jQuery, add this to the event handler. This will provide you with a collection of table cells:
var columns = $(this).closest('tr').children();
// .eq() is 0-based, so this would retrieve the fourth column
columns.eq(3);
You can find the index of a row using the index() function.
$('input').click(function(){
var index = $(this).parents('tr').index();
alert('you click an input on row #' + index);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td><input type="text"></td>
<td></td>
</tr>
<tr>
<td><input type="text"></td>
<td></td>
</tr>
<tr>
<td><input type="text"></td>
<td></td>
</tr>
</table>
Use closest to get the parent TR element.
$('your_element').click(function(){
var tr = $(this).closest('tr');
var element1 = $(tr).find('element_to_find');
});
You can also use the :eq operator to find the td.
$('your_element').click(function() {
var tr = $(this).closest('tr');
var col3 = $("td:eq(2)", tr);
}
I have a html table as below:
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
</table>
On click of a td I am changing the color of it's next 4 td's and for that I have done it in jquery as below:
$(this).nextAll("td").slice(0, 4).addClass("selected");
Above code is working if I click on 1st TD then it selects further 4 td's but if I click on 4th td then it selects only 5th td. I want it to select another 3 td's in next row as well.
Please tell me how can I fix this?
jQuery .index() method returns the index of passed element in the current set. By using returned index you can .slice() the collection, this is more efficient than querying the DOM on each click, especially when you have a big table:
var $tds = $('#table td').on('click', function() {
var i = $tds.index(this);
$tds.slice(++i, i+4).addClass("selected");
});
http://jsfiddle.net/MamYX/
You can simply add the td of the following row. :
$(this).nextAll("td").add($(this).closest('tr').nextAll().find('td'))
.slice(0, 4).addClass("selected");
Demonstration
var $tds = $('table td').click(function(){
var idx = $tds.index(this);
$tds.filter(':gt(' + idx + '):lt(4)').addClass('selected')
})
Demo: Fiddle
I have table that is filled with dynamic content from a query from a database on the backend. I want to hide any tr that contains only zeros.
Here is what my table looks like:
<table id="table1" " cellspacing="0" style="width: 800px">
<thead id="tablehead">
</thead>
<tbody id="tabledata">
<tr class="odd">
<td>0</td>
<td>0</td>
<td>0</td>
<td>0.00%</td>
<td>0.00%</td>
<td>$0.00</td>
<td>$0.00</td>
<td>$0.00</td>
<td>$0.00</td>
<td>$0.00</td>
<td>$0.00</td>
</tr>
</tbody>
Now if the first three td's in tbody are == 0 then I would like to add a class to the tr that will effectively hide that row. How would I go about doing this using jQuery?
EDIT:
Sorry forgot to add what I have tried. The following is a test script I tried to see if I could collect all the td's
$(document).ready(function() {
$("#table1 td").filter(function() {
return $(this).text == 0;
}).css("text-color", "red");
});
You can do this :
$('tr').each(function(){
var tr = $(this);
if (tr.find('td:eq(0)').text()=="0"
&& tr.find('td:eq(1)').text()=="0"
&& tr.find('td:eq(2)').text()=="0"
) tr.addClass('hidden');
});
Demonstration (the hidden class changes the color to red, it's clearer...)
Depending on your need, you might have to trim the texts, or to parse them.
For more complex tests, you might find useful to work directly with an array of the cell contents. You can get it using
var celltexts = tr.find('td').map(function(){return $(this).text()}).toArray();
Hi have a table that has many rows
The first row has <th>s then all the following rows contain <td>s
If I use the script below and click on the the first row with <td>s in it I get an alert saying 1. How do I make it say zero with out subtracting one. I thought that using "has(td)" would work?
$('td').click(function(){
var s = $(this).parents('table tr:has(td)').index();
alert(s);
});
<table border="1" width="400px" height="200px">
<tr>
<th></th><th></th><th></th><th></th><th></th>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td> if I click here it must alert 0
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td> if I click here it must alert 1
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td> if I click here it must alert 2
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td> if I click here it must alert 3
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td> if I click here it must alert 4
</tr>
</table>
Pass the a selector to .index() to filter out the siblings
$('td').click(function(){
var s = $(this).parent().index('tr:has(td)');
alert(s);
});
http://jsfiddle.net/nAhE3/