We Keep Coding

Better way to get an element from a parent by class in JQuery

Say I want to put a button in an HTML table that gives me the value of the neighbor cell upon clicking it.
I have this sample JQuery code: console.log($(this).parent().parent().children('.name-cell').get(0).innerText);
In which $(this) is a button in a table cell, the rest of the line gets a neighbor cell with a specific class name name-cell and returns its value or text.
This one works but since I'm new to JS I don't know if it's the correct way to do it since it looks very clumsy.
Is there any other way I'm not aware of?

JQuery .siblings() is what you need
$(this).siblings('.name-cell').text();

How to add empty data row in Datatable using angular2+?

I want to add empty data row. My requirement is like columns are dynamic. I have tried using dtInstance to add the row. it's throwing some error.
here is the link
https://stackblitz.com/edit/how-to-replace-all-the-columns-dynamically-in-data-table-gvfose?file=app/app.component.ts
Please let me know if more details required.

I dont think that's possible with Angular-datatables out of the box, but you can use Angular-xeditable to achieve that as in this question. A better way to do it in my humble opinion would be, when the user clicks the 'add' button, we show a pop-up, they fill the data, we update the back-end or the reference table and rerender the table.

You gave the Data table wrong model. you are mixing between different models in your code.
I've fixed it as well adding two empty rows, make sure to align with the model defined by columnsDataObj
https://stackblitz.com/edit/how-to-replace-all-the-columns-dynamically-in-data-table-zemuq2?file=app/app.component.ts

There is a simple demo for your requirement that puts the other button to save the empty column you want to access the data.
For easy to use, add DATA button that would be shown the blank row with input, the style you desire to set up the CSS and don't forgot the CSS scope for your by Encapsulation.
DEMO
If the operation field is superfluous, rid it off and place the event for three columns after entering with your logical condition.
Annoying Button
The add DATA could be replaced with the below code, setup the life hook instead for insert the method in the constructor.
ngAfterViewInit (){
this.addData();
}

html table id's are dynamic in nature for me to filter data based on dropdown value

I'm new to html & js. I'm leveraging render() function in python to convert a dataframe to html where I'm trying to add dropdown to the page. once the html page is generated, i'm finding table id to be randomly generated unique value for me to use it in javascript logic for dropdown to filter html data. Kindly could someone help me how to handle this scenario.

While rendering pass the parameter, table_id="Your_id", to the dataframe.to_html function,
Ex:
DataFrame.to_html(table_id="Your_id").
Also the following is a good link to look over:
https://pandas.pydata.org/pandas-docs/version/0.23.4/generated/pandas.DataFrame.to_html.html
Here is a good github reference to the source code:
https://github.com/pandas-dev/pandas/blob/v0.23.4/pandas/core/frame.py#L1977-L2040

Change of one field in the html table, changes a specific element inside that table. Not in other tables

I know that the practice is that every element has a unique id. I am curious about this case: I have a table (let's call it table1) that has many functions connecting its cells in various ways (ex: editing one cell changes other cells accordingly). Now, I need to have another table (let's call it table2), that will have exact same functions between its cells.
I would like to avoid changing the ids in the table2, and then copy pasting the js functions for the table1 and apply them for the ids from the table2.
The easiest thing for me would be to just copy-paste this table1 (so the cells in the table1 and table2 will have same ids), and adapt the js functions to make sure that whenever a change in table1 happens - only table1 is affected, and not cells in table2, and vice versa.
Example:
$('body').on('keyup', "input[id^='sub_']", function() {
$("[id^='top_']").val(5);
}
Now, I suppose if I have an id that begins with "top_" in both tables that the change in table1 will also change the value of the field "top_" in table2.
How can I make sure to avoid this?
I was thinking to do something like this:
$(this).closest("input[id^='top_']");
But this is not working, the values are changed in both tables... Does anyone have a suggestion?

Try the following code snippet:
$(this).closest("table").find("input[id^='top_']");
This will make sure the changes are made only within the table where the event occurred.
EDIT
Here is a small example that you can modify for your needs if you don't want to provide your HTML: https://jsfiddle.net/fjh0v6m4/10/

Maybe try
$('#sameid')[0].dosomething()

jQuery not all tables rows are getting selected

I am working on the enterprise application where I need to remove all the classes of a specific table rows.
I am using following jQuery selector for selecting all the rows
var bodyTable = $(".ui-jqgrid-bdiv table tbody");
var bodyRows = $(bodyTable).find("tr");
The HTML for the div in which table resides is in the following jsFiddle
jsFiddle
In jsFiddle it works as expected and returns all 11 rows but in the application it only selects the first row and the following code returns 1
$(bodyTable).find("tr").length;
I am not able to determine what could be stopping it.
Any pointers why jquery would only select first row?

if you want to execute something on each row ... try this
$(bodyTable).find("tr").each(function(){
//operation on each row
}

Well, It turned out be a case of putting the code in the wrong event.
Our application is event driven application and I was writing the code at initial event when the UI is being displayed.
#shhade slman comment made me look at the other events and after putting the same code in the data rendering event worked as expected. I knew it is something inside the application as the code in jsFiddle was working.
Thanks all for your input that nudged me into the right direction.