We Keep Coding

Accessing table cells in jQuery

How come this works:
alert(document.getElementById("tableId").rows[7].cells[7].innerHTML);
But not this:
alert($("#tableId").rows[7].cells[7].innerHTML);
For context, I had used .append to add in cells to the table, and I want to be able to manipulate each cell further in the future (such as using .data, which is why I want to use jQuery.
Alternatively, are there other ways to access the individual cells in the table? Thank you.

The former works because getElementById() returns an HTMLTableElement object which has the rows property. The latter uses a jQuery object which does not have the rows property, so you get an error.
You could solve this by retrieving the underlying Element from the jQuery object in one of two ways:
console.log($("#tableId")[0].rows[7].cells[7].innerHTML); // access by index
console.log($("#tableId").get(0).rows[7].cells[7].innerHTML); // get(0)
Alternatively you could use jQuery selectors to select the cell you want directly:
let html = $('#tableId tr:eq(7) td:eq(7)').html();
For context, I had used .append to add in cells to the table, and I want to be able to manipulate each cell further in the future
If this is the case you can save a reference to the content you add so that you can use it again without having to perform a DOM access operation. In pseudo-code it would look something like this:
let $content = $('<tr><td>Foo</td></tr').appendTo('#tableId');
// in some other function later in the page execution...
$content.find('td').text('bar').data('lorem', 'ipsum');

If you are looking to loop over each row
$('#tableId tr').each(function() {
if (!this.rowIndex) return; // to skip first row if you have heading
console.log(this.cells[0].innerHTML);
});

How to implement "Find and Replace" logic in Handsontable?

As we have find and replace logic in Excel and many other documents, how to implement the same using Handsontable? I tried to find the same in the Handsontable site but could not find. All i could find was "search" using searchbox.
Im new to Handsontable. Any help on this would be great.

You can easily reuse the search function already present in the Handsontable documentation example for the first part of the problem.
You then have to add a field where you can put the value you want to replace the cells that have been match, and use the below simple function to replace those values by the new one :
Handsontable.dom.addEvent(Replace, 'click', function() {
// Replace the value of every cell that have been match by the search query
for (row = 0, r_len = queryResult.length; row < r_len; row++) {
hot.setDataAtCell(queryResult[row].row, queryResult[row].col, replace);
}
// Reset all the fields
SearchField="";
ReplaceField="";
queryResult="";
document.getElementById('Search').value='';
document.getElementById('ReplaceWith').value='';
});
See this working jsFiddle example.

Adding to https://stackoverflow.com/a/50228873/9230481
Note that this fail if you enable any form of sorting or filtering (e.g. columnSorting: true) because the matches in „visual indices“, which change after sorting. To solve this you need map the indices to physical ones right after the search finished. See https://handsontable.com/docs/api/core/#tophysicalrow and https://handsontable.com/docs/api/core/#tophysicalcolumn
In the replace function you need to map physical indices back to visual indices as setDataAtCell expects visual indices: https://handsontable.com/docs/api/core/#setdataatcell

DataTables - Search in multiple columns with a single drop down

I'm working with DataTables and i'm trying to search a result in a table with a dropdown. But rather than searching one column, I need to search in two specific columns.
The below syntax works with a single column but how do i do it with multiple columns?
var table = $('#example1').DataTable();
$("#filter").on('change', function() {
table.column([4]).search($(this).val()).draw();
});
I tried doing this but when i use this code it only searches the result in the first column, E.g. 4th Column. and ignores the rest.
table.column([4,5]).search($(this).val()).draw();
What is the proper method for this?

Lets summarize all things here. It will help other people as well.
You can achieve this as follow:
table.column(4).search(this.value).column(5).search(this.val‌​ue).draw();
It will perform search on 4 column (4 is index of column), after that it will filter data from 5 column against provided filter value and at the end it will draw the table.
One thing to keep in mind is that Filter is applied on both columns, so both columns must contains matching data.
Here is its filddle
This can be achieved by using fnMultiFilter as it documentation explains:
This plug-in adds to DataTables the ability to set multiple column filtering terms in a single call (particularly useful if using server-side processing). Used in combination with the column sName parameter, simply pass in an object with the key/value pair being the column you wish to search on, and the value you wish to search for.

Use columns() in place of column():
var table = $('#example1').DataTable();
$("#filter").on('change', function() {
table.columns([4,5]).search($(this).val()).draw();
});

From the doc, you should be using .columns() (note the plural)

For an OR search among multiple columns, disable columns for the search using
columns.searchableSince: Enable or disable search on the data in a certain column.
Alternatively, you can also use an HTML attribute to remove the column from the search
<th data-searchable=false>

jqgrid getCell strange behaviour

I've a jqgrid and a getCell method which returns the value of a cell depending of id. It works only for the first row of the grid, in others identifyImg = false:
var ids = jQuery("#myGrid").getDataIDs();
for(var i=0;i<ids.length;i++){
var identifyImg = $('#myGrid').jqGrid('getCell', i, 'idState');
alert(identifyImg); // return false after first row
if(identifyImg == '1'){
//DO SOMETHING
}
}
the column is defined as the follow:
{name:'idState',index:'idState', width:55}
And is correctly populated with numbers. How can I solve this?

you should use
$('#myGrid').jqGrid('getCell', ids[i], 'idState');
instead of
$('#myGrid').jqGrid('getCell', i, 'idState');
I want additionally to mention that in the most cases one don't need use loop over ids returned from getDataIDs. It was a good approach in customizing of jqGrid inside of loadComplete or gridComplete in old versions of jqGrid. Now there are more better (from the performance point of view) alternatives. For example if you need to change some style or other attribute of one cell based on the content of one column you can use cellattr (see the answer, the answer, the answer, the answer or other). If you need to change some attributes of the whole row based on the content of one column you can use rowattr (see the answer). In other cases if you need to change content of the cell (not an attribute) based on the content of another cell you can use custom formatter.

jqgrid delete all rows inside grid

Is there a way to delete all rows in one function call? and not by looping through all rows and deleting row by row.
Thank's In Advance.

If you mean remove all rows from the grid you can just do this..
$('#grid1').jqGrid('clearGridData');

It's depend on what you exactly mean under "deleting of all rows". The method GridUnload could be very helpful in many cases, but it delete more as only grid contain.
Another method used intern in jqGrid is:
var trf = $("#list tbody:first tr:first")[0];
$("#list tbody:first").empty().append(trf);
Probably it is what you need. It delete all grid rows excepting of the first one. You can overwrite the code also as the following
var myGrid = $("#list"); // the variable you probably have already somewhere
var gridBody = myGrid.children("tbody");
var firstRow = gridBody.children("tr.jqgfirstrow");
gridBody.empty().append(firstRow);

If you're going to remove all rows and insert grid data back, you may use $('#grid1').jqGrid('GridUnload');
Otherwise, you can use old answer suggested by Oleg