We Keep Coding

changing the DOM after accessing a database

i'm using the PDO library in php to access a database and return some values into a table which need to be shown when the user first opens the webpage,
after this I want to implement a filter option, so that the user can input some data in a form field and the data shown is updated according to the filters set by the user.
I don't know how to update the DOM in this case, would it be possible to update the DOM using Jquery so that only the new values are shown in the table, or do i need to redirect to a new page/reconstruct my table with a full request/response cycle.
thank you for your help in anycase.

If I understand correctly, you want to output the data from the result of your MySQL query as a table, and then having a search bar which will filter the output table according to the search bar. What I would do is first use the data to generate a table and give it a css class. For the search bar you can use form or event listener to process apply your filter from the value in the search bar. For example you can loop the rows of the table and check if a column contain a substring of the search bar value(as an example, check with whatever criteria you prefer) and just add a css value display: hidden to the row, or restructure the table, there are many ways of doing it.

How to delete a row if the row is present in next page or some other page JQuery datatables

I have row data present in some page say page no 3 but i am in page no 1, i want to delete row present in page 3.I have tried below code but it did not work.please assist.
$('#tableid').DataTable().rows($('#idofthatrow')).remove().draw(false);

jQuery $() method will not work because rows for pages other than current do not exist in DOM.
API method row() and rows() accept row ID as an argument, see row-selector documentation.
Your code could be rewritten as:
$('#tableid').DataTable().row('#idofthatrow').remove().draw(false);

Extract a row from table

I am trying to extract a specific row of data from a table in a live webpage using the following code.
requestCrossDomain('https://eosweb.larc.nasa.gov/cgi-bin/sse/grid.cgi?&num=197110&lat=23&submit=Submit&hgt=100&veg=17&sitelev=&email=skip#larc.nasa.gov&p=grid_id&p=T10M&p=DLYRANGE&step=2&lon=16', function(results) {
$('#loadedContent').css("display","").html(results);
//alert($($('#loadedContent table')[4]).text());
//The above line parses the table i need and displays the content in an alert box.
//But when I try the same line of code to display a specific row, it doesnt display anything
alert($($('#loadedContent table tr:eq(2)')[4]).text());
});
Note that the Website does not assign a name or id to the tables in its page. so I try to extract the table using the position. I am quite successful until this. But when i try to extract a specific row of data from the table. I could not. What should I do to extract a row of data from the table.
P.S: there are multiple tables in the page and none of it is assigned a name or id

You can use :eq() selector here
alert($('#loadedContent table:eq(4) tr:eq(2)').text());
This will select 3rd tr inside 5th table

Select HTML Table Row and Identify DB Record ID

I’m developing a simple CRUD based application for upskilling purposes.
Currently, the application outputs the result of a select query to a HTML table using JSTL. The last column of this table has a Delete link for each record which sends the parameters action=delete&id=1 to the server. The id param value part of the href of these links are obviously dynamically generated with JSTL based on the database record key that is passed into the JSP with the database results.
Instead of having this Delete column, I want the user to “select” a row and click a Delete button at the bottom of the table, which will send the above parameters to the server.
I am unsure how to accomplish the following to achieve this:
(1) In Javascript, how can I allow the user to “select” a table row. I don’t want the table to have radio buttons. The behaviour should be that the user clicks the row, the entire row colour changes and JS retains the index of the selected row. Only one row can be selected at a time. If the user clicks the row again, it becomes deselected, i.e. the colour is returned to its original colour and JS no longer identifies that row index as being highlighted.
(2) If I don’t have a Delete link specific to each db record, how can I identify the key of the db record to be deleted and return this to the server when the Delete button is clicked. For example, currently if the record in the db has an PK of 123456, my JSTL will generate a href action=delete&id=123456 for that specific Delete link. So, how can I link that id to the selected table row without having to actually display that id in the HTML table.

1) There are plenty of ways to do it. I suppose all of them will involve the use of something like var rows = document.getElementsByTagName("tr"); or its jquery (or other framework) equivalent. Or some other selector, maybe by CSS classname, could be used. Followed by a loop in which you deselect all the rows that were not clicked and select only the one that was recently clicked. Changing the color equals just changing the css class assigned to the DOM element basically.
2) You will use Javascript either to append to the DOM an html form with hidden inputs (<input type='hidden'.../>) and then submit it via Javascript (if you're Ok with moving to a different page and back). Or you can use Javascript to send an Ajax request to the delete servlet, and then remove the particular tr from the page when you receive a success response back.

How to add a row below the currently selected row (based on a dropdown input) using jQuery?

I have a table with a bunch of rows. In the last column of every row, there is a dropdown. When the dropdown changes, I need a new table row to appear below the row where the user selected the dropdown item. However, I also need the new row to have different data depending on what was selected in the dropdown.
Is any of this possible using only jQuery?
Note that I'm using ASP.NET for back-end development, so if a solution can be found without using ID's that would be great.

$("table select").live("click",function(){
var row=$(this).parent().parent();//add some .parent() untill you get the TR element
var val=$(this).val(); //<select> value if you want to use it for some conditions
$("<tr><td>....</td></tr>").insertAfter(row);
})

It's simple enough to add the HTML using JQuery. However, if you intend to save this data back to the server, the default ASP.NET process (using ViewState) will ignore the new rows. Instead, you would need to directly read the submitted form properties.
To learn how to add a row, look at the suggestions here: How to add a new row to a specified table with jQuery?