I'd like to iterate through a tables columns. Given I have a cell Id, I then want to get the values of the rest of the cells in that column.
The reason for this is, I want to add some validation so that 3 cells in a column, can't all contain the same class.
I'm open to ideas using both jQuery or PHP.
If you require more information, please comment.
In JQuery to get an item's column:
var column = $('#myID').index();
To parse through the table by the nth column:
var columnNth = $('#myID').index() + 1;
var items = [];
$('#tblID tbody tr td:nth-child('+columnNth +')').each( function(){
//add item to array
items.push( $(this).attr('class'); );
});
Related
In PHP, I have a dynamic number of tables, and each table has a dynamic number of rows. The last column in the table ($reasonstr) is a drop down list. I want to capture the change in that drop down. If I do this:
$('#reason2td3').change(
function(){
}
I'm able to capture what I need. However, I want this to be dynamic, based on the number of tables and rows on the page.
I have identified the tables & rows as follows:
table, where $id increases with each table on the page:
echo sprintf('<table cellspacing="0" class="myTable" id="myTable%s">',$id);
so, if there are two tables on the page, they are #myTable1 and #myTable2.
rows, where $tdid increases with each row in the table:
echo '<tbody>';
foreach ($record as $r) {
echo sprintf('<tr><td>%s</td><td>%s</td><td>%s</td><td>%s</td><td>%s</td><td>%s</td><td>%s</td><td>$ %s</td><td>%s</td><td id="reason%std%s">%s</td></tr>',
$r['org_number'],
$r['dept_descr'],
$r['supplier_number'],
$r['supplier_name'],
$r['invoice_number'],
$r['receive_date'],
$r['final_qty'],
number_format($r['final_cost'],2),
$r['inv_status'],
$id,
$tdid,
$reasonstr);
$tdid++;
}
echo '</tbody></table>';
$tdid=0;
so, the 3rd row in table 2 is #reason2td3.
How do I capture the $id and $tdid from PHP and use it in JQuery?
Use the attribute starts with selector :
$('[id^="myTable"]').on('change', function(){
var $id = this.id;
// do stuff
});
That will target all elements with an ID starting with myTable, for instance myTable1, myTable2, myTableStackOverflowChineseOldMan etc.
Inserting the elements with PHP doesn't really make them dynamic, so delegated event handlers shouldn't be needed for this.
I am working on a scheduling project and have run into an issue with finding the column index of a selected cell (so that i may then get the appropriate header for the column). The issue comes into play when a previous cell(or cells) have/has a rowspan. In which case the cell index is off by that amount of cells. I have been at this since yesterday. My current attempt involves using a solution I found in previous posts, and this is this:
parentTr.find('>td, >th').each(function(i,o) {
if ( this == reference )
{
cellNum = i;
var counter = columnNum;
while ( counter-- )
{
$(this).closest('tr').next().find('>td,>th').each(function(i,o)
{
if ( cellNum == i )
{
$(this).addClass('rowspan-affected');
$(this).attr('colNum', columnNum);
}
});
}
}
});
})
The problem is that this solution counts the number of rowspanned cells on the entire page. I need a count of the rowspanned cells for only the current clicked cell, and then be able to add that count to index so I can get the proper header. What I have been trying looks like this:
var $this = $(this);
//get the row header contents
var row = $this.parent('tr').contents('th:eq(0)').html();
//trying this
var colCount = $(this).prevAll().find('td').parent('tr').attr('rowspan');
alert (colCount);
//used to get the cell index
var rowIndex = $(this).parent().index('.main tbody tr');
var tdIndex = $(this).index('.main tbody tr:eq('+rowIndex+') td');
//alert ("tdindex " + (tdIndex+1));
var headerObj = $(this).parents('.main').find('th').eq(tdIndex+1);
//strip whitespace before passing
var toPass = $.trim(headerObj.text());
//toPass = $.trim(toPass)
//alert (toPass);
This information is gathered and then passed to a new form with the selected information used to populate the form.
If anyone can help me with this, I would be greatly appreciative!!!
I have this scenario.
1) Server Side returns a json encoded array having different fields in it along with primary key i.e., id.
2) A kendo treeview is created from that json
3
I want to do this,
1) User browse the tree and select a node.
2) I want to find the primary id of the tree or any other field that is passed from server side to distinguish the selected node.
I hope I deliver the question.
Thanks in advance.
Define your select function as:
select : function (e) {
// Get clicked node
var node = e.node;
// Find it's UID
var uid = $(node).closest("li").data("uid");
// Get the item that has this UID
var item = this.dataSource.getByUid(uid);
}
for find uid you can find it by e.node attribute
select : function (e) {
var uid = e.node.attributes['data-uid'].value;
var dataItem = this.dataSource.getByUid(uid);
alert(dataItem.ProductName);
}
here is another solution:
onSelect: function(e) {
var treeView = e.sender,
dataItem = treeView.dataItem(e.node);
console.log(dataItem.id); // retrieves an ID of selected node
}
I have a div with more than one ID and I need to get each ID separately and send both variables off to a PHP file. I feel this would be the simpler option if achievable but the other option is to split the two IDS on the server side with PHP once the ID has been sent to it by jQuery. One ID is the timestamp the other the ID in the database.
HTML div example:
<div style="margin-bottom:10px;" id="1000003 2012-09-04 21:24:32" class="newsItem"></div>
The 1000003 is the ID i need to get into one separate variable and the rest is the timestamp I need in another separate variable.
The jQuery I have:
window.setInterval(function(){
//scripting here
var obj = $('.newsItem:first').map(function(_, elem){
return elem.id;
});
var ids = $.makeArray(obj); //variable of IDS
$.get("AJAX/get_feed_updates.php",{ ids: ids },function(result){
$("#newsFeed").html(result);
});
}, 5000);
The PHP file just puts the ID into a variable and queries the database with it.
Store one in the DATA attribute. Here is another reference to how its used.
Is this right?
window.setInterval(function(){
//scripting here
var theId = $('.newsItem:first').attr('id');
var a = theId.split(' ');
var theId = a[0];
var theStamp = a[1]+''+a[2];
$.get("AJAX/get_feed_updates.php",{ ids: theId },function(result){
$("#newsFeed").html(result);
});
}, 5000);
You should use data attribute. Then you can do something like this..
<div data-timestamp="1000003 2012-09-04 21:24:32" id="myId"></div>
I have a dynamically generated table with php that has same rows. Need to get value from cell 1 in row 1 and value from cell 1 in row 2 and compare them. If they are the same remove entire row or hide... Do that for the whole table... Any help is appreciated.. Thanks!!
Haave this so far:
var numRows = $('table#changeSubjectKatedra tr').lenght;
var i = 0;
do {
var cur = $('input#'+i).val();
var next = $('input#'+(i+1)).val();
if(cur == next){
$('tr#'+i).remove();
}
i++;
} while(i<numRows);
The row in table looks like this:
<tr id='idNum'><td>someText<input type='hidden' value='someData' id='idNum'>
</td><td>someText</td></tr>
Note 1. You should do in on server side with PHP, not with JavaScript.
Note 2. You must use unique id for each element.
Note 3. Avoid using numerical ids of elements.
Note 4. You don't need ids at all for doing what you want.
If you still want to do it in JavaScript, I suggest you to do it this way: (live demo here)
var rows = $("#changeSubjectKatedra tr");
for(var i = 0; i <= rows.length - 2; i++) {
if ($(rows[i]).find("input").val() ==
$(rows[i+1]).find("input").val()) {
$(rows[i]).remove();
}
}
You can use jQuery's .each function. This should work according to the description you provided:
$('table#changeSubjectKatedra tr').each(function() {
if (repeat == $(this).children("input")[0].value) {
$(this).remove();
}
repeat = $(this).children("input")[0].value;
});