Afternoon,
I wish to pass the row number of a table to a function to reference that specific row in that specific table, for example say I have this:
<table id="foo">
<tr><td>some stuff...</td><tr>
<tr><td>stuff</td><tr>
<tr><td>more stuff</td><tr>
<tr><td>some stuff</td><tr>
<tr><td>some stuff</td><tr>
</table>
and I have looped through the table rows and obtained the index, so in this example say I wanted to do something with the third row (which would have an index of 2, the one which has the contents "more stuff"). And I passed this through a function, like this
manipulateRow(2)
and this is my whole function
function manipulateRow(rowIndex){
/* do something */
}
How do you refer the rowIndex parameter to the table within the function? For example:
$('#foo').child("tr")[rowIndex].html('<td>i now contain even more stuff!</td>'); // I know this is wrong, how do I make it right?
Sorry if I'm being a bit thick or not explaining myself.
Easy.
$("#foo tr:eq("+rowIndex+")").html("<td>i now contain even more stuff!</td>");
Learn more about jQuery selectors here: http://api.jquery.com/category/selectors/
that could work actually only like this:
$($('#foo tr')[rowIndex]).html('<td>i now contain even more stuff!</td>');
but best to use :eq
Try this
$('#foo > tr').eq(rowIndex).html('<td>i now contain even more stuff!</td>');
function manipulateRow(rowIndex) {
var $row = $('#foo tr:nth-child(' + rowIndex + ')');
...
}
See nth-child-selector.
here you go:
<table>
<tbody>
<tr><td>Foo</td></tr>
</tbody>
<tfoot>
<tr><td>footer information</td></tr>
</tfoot>
</table>
$("#myTable > tbody").append("<tr><td>row content</td></tr>");
heres another example inline editing:
function editRow(row) {
$('td',row).each(function() {
$(this).html('<input type="text" value="' + $(this).html() + '" />');
});
}
Related
If I append rows to my table like this:
$('#tbody_upload').append('<tr id="' + data.originalFiles[counter].name + '"><td>' + 'Uploading...' + '</td><td></td><td></td><td></td></tr>');
how can I remove it from another event?
$('#' + this.name).remove();
that function doesn't work, also appended items don't appear in source of the page.
If you want remove the element that triggers the event to be removed (as appears from this.name) you can simply do
$(this).remove();
Maybe you should name your table and then with a selector select the body and first errase it and then append data so every time you get new data, the table deletes the old data and puts the new one.
<table id="yourtableName" border="1" class="hoverTable">
<thead>
</thead>
<tbody>
</tbody>
</table>
var gridBody = your tr code;
$('#yourtableName tbody').empty().append(gridBody);
I have a table and need to build json array. I need value from 1 and 4 column of table.
HTML
<table class="table table-striped" id="development_mapping">
<thead>
<tr>
<th>Visual Feature</th>
<th>Step</th>
<th>Output</th>
<th>Data Feature</th>
</tr>
</thead>
<tbody>
<tr><td>color</td>
<td><select id="sss"><option data-id="528092be144b4fbf65893404" selected="selected">first-step</option><option data-id="52809373144b4fbf6589340c">kmeans</option></select></td>
<td><select id="ooo"><option data-id="output" selected="selected">output</option></select></td>
<td><input id="value1" class="feature-execution"value="id"></td></tr></tbody>
</table>
Here is my solution, a function to made an json array from table
JAVASCRIPT
var jsonArray = {};
$('#development_mapping').find('tr').each(function () {
var name = $(this).find('td:first').text();
jsonArray[name] = {
variable : $(this).find('td:eq(3)').text()
};
});
I have done, but not understand, why I get " " from value of 4 column. I mean, why variable in variable is always getting " "
This is my DEMO
Your selector: $('#development_mapping').find('tr') is selecting all <tr> tags in the table. Even the one in the <thead>! The <thead> doesn't have <td> tags, so that's where the " " is coming from.
Try this:
$('#development_mapping').find('tbody tr').each(function () {
var name = $(this).find('td:first').text();
jsonArray[name] = {
variable : $(this).find('td:eq(3)').text()
};
});
You are using .text() but there is no actual text in your 3rd td tag.
try this maybe?
variable : $(this).find('td:eq(3) input').val()
There are 2 problems with your code.
Remove the surrounding <tr> in your table head definition.
Use this to access input value
variable: $(this).find('td:eq(3) > input').first().val()
$.find() will return a collection and you'll need to get the first object of the collection for further use. Plus, you'll need to search for input inside the cell, not the cell itself.
Here is the working fiddle: http://jsfiddle.net/toshkaexe/7q3KP/
I need to write a multi column search in a table. Due to some reason (support issue), I am unable to use datatable and table sorter plugin. I need your help in algorithmic part that how can I make multi column search. Please do not give me the link of already created plugins since I have changed table structure too much and I am unable to use those. I need something like this
datatables.net/examples/api/multi_filter.html
if I will get the hint for how its algo works, I will write the same function for me. I have written this code, but it is working on single column search, when I am searching in another column, it resets the search in multi column.
function searchonKeyPress(input_text_box)
{
var query = $.trim(input_text_box.val());
query = query.replace(/ /gi, '|');
if(query=='undefined')
return false;
var index_input = input_text_box.closest("th").index();
index = $("#freeze-tableFreeze .GridviewScrollItem tr:eq("+index_input+") td").length;
$("#freeze-tableFreeze .GridviewScrollItem").each(function() {
var tr_ident = $(this).attr('tr_ident');
var column_text = $(".GridviewScrollItem[tr_ident='"+tr_ident+"'] td:eq("+index_input+")").text();
(column_text.search(new RegExp(query, "i")) < 0) ? $(this).hide().removeClass('visible') : $(this).show().addClass('visible');
});
pagignation(1);
}
I need something like this:
Try this if you want to search in all the table: DEMO
If you want to search by column try this :DEMO
HTML:
<table>
<thead>
<tr>
<th>One<input type='text' class='search' /></th>
<th>Two<input type='text' class='search' /></th>
<th>Three<input type='text' class='search' /></th>
<th>Four<input type='text' class='search' /></th>
</tr>
</thead>
.........
JQuery:
$('.search').blur(function(){
$("td").removeClass('selected','');
var index=$(this).index('.search')+1;
$('.search').each(function(index , val){
var tag=$(val).val();
if(tag!='') $("tr td:contains("+tag+")").addClass('selected');
});
});
The simplest solution here would be to select all td's in your table and filter them using jQuery :contains() selector with the search phrase and highlight the rows / columns.
Take a look into this simple example. This selects all the cells with keyword 'one'.
$('td:contains(one)').css('color', 'red');
Update :
New sample with search box code.
For filtering you can use JQuery and manually iterate through the html markup to show/hide certain rows dependent on the filter criteria...
I build a small example of how to achieve this. Because you didn't provide any code, you'll have to adopt it
http://jsfiddle.net/Elak/FxBhQ/
The JQuery part is not overly complex, of cause you have to extend it to what ever functionality you want to have...
$(document).ready(function () {
$(".searchBox").change(function () {
var search = $(this).val();
$(".column").each(function () {
if ($(this).text().indexOf(search)) {
$(this).parent().hide();
}
});
});
});
I have table in the dom that looks like this
<div id="table">
<table>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
</div>
I want to iterate through this table, such as $('#table').each(function(){}) but I only want to iterate through the second column. So the ones which in this example have a value of b.
Any ideas how to do this?
Thank you!
Try this:
$("table tr td:nth-child(2)").each(function () {
});
Using the nth-child selector in jQuery, this should work:
$("#table").find("td:nth-child(2)").each(function () {
});
This uses the nth-child selector, http://api.jquery.com/nth-child-selector/ , which as the link states, would select all <td> elements that are the 2nd child of their parent (which would be a <tr>).
Here's a fiddle that demonstrates it: http://jsfiddle.net/GshRz/
If you are looking for a selector that gets the <td>s that are only immediately in the table (like not in a nested table), then use something like:
$("#table").children("tbody").children("tr").children("td:nth-child(2)").each(function () {
});
http://jsfiddle.net/GshRz/1/
Depending on your structure (where you might include a <thead>), you could use .children("thead, tbody") instead of just .children("tbody").
Also, in case you want to be grabbing several columns, it could be easier to select the <tr> elements and then get their children <td> elements. For example:
$("#table1").children("tbody").children("tr").each(function (i) {
var $this = $(this);
var my_td = $this.children("td");
var second_col = my_td.eq(1);
var third_col = my_td.eq(2);
console.log("Second Column Value (row " + i + "): " + second_col.html());
console.log("Third Column Value (row " + i + "): " + third_col.html());
});
http://jsfiddle.net/GshRz/2/
What selectors you use and where, is up to the structure and content of your table. So remember to differentiate between children and find, and nth-child and eq.
$("#table td:nth-child(2)").each(function (index) {
alert('Row no. ' + (index+1) + ', Column 2 : ' + $(this).html());
});
Sample
<table id="myTable0" name="myTable0">
<tbody>
<tr>
</tr>
</tbody>
</table>
<table id="myTable1" name="myTable1">
<tbody>
<tr>
</tr>
</tbody>
</table>
I need some JQuery that will attempt to append new html to the end of a table and do it on the enter key, it will also select the correct table to append it to as there are numerous tables.
Here is my code that doesn't work but attempts to do this:
for (i=0; i<2; i++)
{
$("#newComment" + i).keyup(function(event){
if(event.keyCode == 13){
var $test= $('<tr><td>content here</td></tr>');
$('#myTable '+ i + ' > tbody:last').append($test);
}
}
The line that is throwing me problems is the Jquery select which follows:
$('#myTable '+ i + ' > tbody:last').append($newdiv1);
Try this:
$('#myTable' + i + ' > tbody:last').append($newdiv1);
The space $('#myTable ' is the problem..
You are having space between #myTable and 0..
You need #myTable0 while you were having #myTable 0
Yup this is very simple
just do like this
$('#myTable'+ i).find('tr:last').append($test);
And thats done.
Is there a typo? I think you mean $test instead if $newdiv1 in a problematic line.
I can see you have only one <tbody> tag so the ':last' selector is not necessary. I think that
$('#myTable' + i + ' tbody').append($test);
will be fine.
Edit: Yup, as Rajat Singhal said remove sapce in selector after #myTable.