We Keep Coding

Get dynamic class of element in javascript

I have a table with a bunch of tr elements with random, dynamically created ids, and corresponding divs with matching ids. I want to use the on('click') function so that when one tr element with a given id is clicked, the corresponding div id is also clicked via javascript.
The table:
<tbody>
<tr id="a94k5h3"></tr>
<tr id="0f3l6k2"></tr>
<tr id="44jg96a"></tr>
</tbody>
The divs:
<div id="a94k5h3"></div>
<div id="0f3l6k2"></div>
<div id="44jg96a"></div>
The code I have so far:
$(document).on('click', '#view_347 #a94k5h3', function(event) {
event.preventDefault();
$("#view_349 .kn-view.kn-map-results.view_349 #a94k5h3").click();
});
The above code works for the first one, but in practice I won't know what the id #a94k5h3 is, or how many tr/divs there will be. Any help would be much appreciated!
-Edit
I am using knack, which creates all of the html elements dynamically, it is not my code. I have attached an image of the output for possible clarification.
[![enter image description here][1]][1]
Essentially I have the same html element on a page twice. When one is clicked, I want the other one to be clicked too.

Since you cannot have duplicate ID on a single page what I suggest you is to use the data-* attribute like this:
<tr data-id="#a94k5h3">
and use .trigger("click") to trigger the designated click event on the DIV
Elements
Example:
$(document).on('click', '[data-id]', function(event) {
event.preventDefault(); // not sure you need this...
// ID is unique! remember? you don't need the classes extra selectors
// Use trigger "click"
$($(this).data("id")).trigger("click");
});
// Just to test!:
$("#view_349").find("div").on("click", function() {
console.log( this.id );
});
<table>
<tbody>
<tr data-id="#a94k5h3"><td>a94k5h3 CLICK ME</td></tr>
<tr data-id="#0f3l6k2"><td>0f3l6k2 CLICK ME</td></tr>
<tr data-id="#44jg96a"><td>44jg96a CLICK ME</td></tr>
</tbody>
</table>
<div id="view_349">
<div id="a94k5h3">DIV a94k5h3</div>
<div id="0f3l6k2">DIV 0f3l6k2</div>
<div id="44jg96a">DIV 44jg96a</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

You shouldn't have duplicate id's in your dom, instead you should have data-* attributes. I chose data-id, but what you can do is grab the id of the clicked row, then do a selection based on that, it would look something like this:
$(document).on('click', 'tr', (event) => {
event.preventDefault()
let id = $(event.currentTarget).attr('id')
$(`[data-id=${id}]`).addClass('selected').click()
})
tr {background-color: red}
div.selected {background-color: yellow}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr id="a94k5h3"><td>Click Me</td></tr>
<tr id="0f3l6k2"><td>Click Me</td></tr>
<tr id="44jg96a"><td>Click Me</td></tr>
</table>
<div data-id="a94k5h3">1</div>
<div data-id="0f3l6k2">2</div>
<div data-id="44jg96a">3</div>

Adding TR element click handlers, to click a corresponding DIV element, needs a query selector that does not involve unknown random id values. E.G.based on the console log image:
"#view_349 table.kn-table TBODY TR"
I assume the selector for the DIV element works as provided
"#view_349 .kn-view.kn-map-results.view_349 #" + divId
Then the TR element click listener function can use the id of the TR element clicked,
event.target.id
to find the corresponding DIV element using JQuery:
$(document).on('click', "#view_347 TR" function(event) {
event.preventDefault();
var targetId = event.target.id;
$("#view_349 .kn-view.kn-map-results.view_349 #" + targetId).click();
});
This will probably work in JQuery but ignores the fact that having two elements with the same id is not valid HTML, as discussed in this question and previously mentioned in comments and other answers. I recommend looking into the possibility of generating the HTML without repeating exactly the same element id value.

Find parent for child value in DOM

I have this html-table:
<table id=mytable>
<tr>
<td>
Mark
</td>
<td>
Susan
</td>
</tr>
</table>
Somewhere from javascript an event occur and I can will be able to fetch the name, which is one of those in the table.
From javascript/jquery I need to find the td-element containing the name and color it.
I tried with:
$("#mytable").find("td:contains('Mark')").parent().css('background-color', 'red');
But the td-element doesnt get colored.

I believe you need to try this:
$("#mytable").find("td:contains('Mark')").css('background-color', 'red');
DEMO
OR
$("#mytable td:contains('Mark')").css('background-color', 'red');
DEMO

You already selected the td what you did is you tried to add a color to the tr which is the parent of the selected td:
$("#mytable").find("td:contains('Mark')").css('background-color', 'red');
that's why you example should be highlighting both td as the color applied for the tr

Can't figure out why my change(...) event handler isn't working in this scenario

The relevant piece of HTML is like
<tbody id="results">
<tr>
<td>
<input type="checkbox">
c:\users\me\documents\visual studio 2013\Projects\myproj\Assets/someorg-somecategory-somepic.png
</td>
<td>someorg</td>
<td>somecategory</td>
<td>somepic.png</td>
</tr>
</tbody>
My intent is for the a elements next to the input elements to be visible or hidden depending on whether or not the input is checked.
Seems like it should be simple enough:
$('#results input').change(function() {
console.log("ok, this function got called.");
this.siblings('a').toggleClass('hidden');
});
inside a $(function() { ... });
But, that's not working. Nothing is being printed to the console when I test by checking or unchecking the element. Any idea why this might be? Need me to post any more code?

Add an id to the checkbox or class
<input type="checkbox" id="checkbox"/>
And use $(this) not this
$(this).siblings('a').toggleClass('hidden');
Working demo: http://jsfiddle.net/omnzocqq/
update
According to my idea, you forget to put the table wrap to tbody. But if you add your table wrapper element and edit this to $(this), your code works.
So you don't need to add a class or id to your checkbox.
http://jsfiddle.net/omnzocqq/3/
Demo

The issue is because within the handler this is a DOMElement. You need to wrap this in a jQuery object to be able to call jQuery methods on it:
$('#results input').change(function() {
$(this).siblings('a').toggleClass('hidden');
});
Example fiddle

Highlight row when clicked on button

I am using following script to highlight row when I clicked edit button of that row. I am passing Id of row when I click on button! My problem is the code is working in Mozila Firefox but not on Google Chrome. What is wrong in following code.
function high(id)
{
$('tr').removeAttr('style');
document.getElementById(id).style="background-color:#eeeeea;color:#000000;font-weight:500;";
}

Try this,
$('#'+id).attr("style","background-color:#eeeeea;color:#000000;font-weight:500;");
Working on chrome also.
The reason, can be style is an object which has some properties in it
and chrome may not allow to overwrite it. So the custom string you
passed in style will not apply to it, hence no changes applied to the
element.

You need to set properties of style object individually.
var elem = document.getElementById(id);
//Set properties
elem.style.color = "#000000";
elem.style.fontWeight = "500";
elem.style.backgroundColor = "#eeeeea";
Since you are using jquery, You can use .css()
$('#' + id).css({
"background-color" :"#eeeeea",
"color":"#000000",
"font-weight":"500";
});
However, I would recommend you to create a CSS class then use it.
$('tr').removeClass('highlight');
$('#' + id).addClass('highlight');

Here is a demo to add special class to the editing row and remove the class on the other rows. This is done using the closest() method of jquery. You even do not need to use any id for this.
$("button").on("click",function(){
$("tr").each(function(){
$(this).removeClass("marked");
});
$(this).closest("tr").addClass("marked");
});
.marked{
background-color:#eeeeea;color:#000000;font-weight:500;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr>
<td>This is TD</td>
<td><button>Edit</button></td>
</tr>
<tr>
<td>This is TD</td>
<td><button>Edit</button></td>
</tr>
<tr>
<td>This is TD</td>
<td><button>Edit</button></td>
</tr>
</table>

Change background color of "th" on change to the immediately next td

I want to change the color of a 'th' element after I make a change to the 'input' elem in the 'td' element just beside it.
Here is the jQuery script I used.
$('#phoneNo').change(function () {
$(this).closest("tr").find("th").css("background-color","yellow");
});
HTML code
<tr>
<th>PhoneNo</th>
<td><input type="text" id="phoneNo"/></td>
<th>EmailId</th>
<td><input type="text" id="emailId"/></td>
</tr>
It behaves like I can expect - It changes the background color of all 'th' elements(both PhoneNo and EmailId in the code) in the row. But what I want is to change the color of only one 'th'-the one just preceding the corresponding 'td'(only PhoneNo)

$('#phoneNo').change(function () {
$(this).parent().prev("th").css("background-color","yellow");
});
Note that since .prev() is looking for previous siblings, you need to find first the td element

$('#phoneNo').change(function () {
$(this).parent().prev('th').css("background-color","yellow");
});​
See fiddle at http://jsfiddle.net/zSjMh/1/