Develop Reference

Get X and Y position after searching an element in a HTML table

I'm having troubles thinking a solution to this problem.
I have this table and a JSON like this one:
{:id=>"e-123",
:subject_initials=>"IN",
:grade=>"12"}
I need to search on the table the id of the person (which in this case is "e-123") and search on the first row the initials of the subject and put the grade on the X and Y position.
The result of the example above should be something like this
Any idea how to do this?

Need to search through the heading inputs to get a column index and search through the user id inputs to get a row index then use eq() method to isolate the one you need to update
var $subjectInput = $('tr').first().find('input').filter(function() {
return this.value === data.subject_initials
});
var $idInput = $('tr').find('td:eq(1) input').filter(function() {
return this.value.toLowerCase() === data.id
});
var colIdx = $subjectInput.parent('td').index();
var rowIdx = $idInput.closest('tr').index();
$('tr').eq(rowIdx).find('td').eq(colIdx).find('input').val(data.grade)
Adding some additional classes on these 2 types of inputs would help make the selectors for finding them easier
If the rows are generated dynamically adding an ID to the row and course name class to the data entry inputs you could simplify the whole thing immensely
<tr id="e-123">
.....
<input class="form-control course_IN">
JS
$('#' + data.id).find('input.course_' + data.subject_initials).val(data.grade)
DEMO

Use a variable for a datatable

I'm trying to doing something in jquery.
This is a part of my jquery:
console.log(tableid);
var table = $('"#'+tableid+'"').DataTable();
tableid = "Data-user1"
table is null....
but when i put table = $("#Data-user1").DataTable() it works. Whats wrong?

Because how you're initializing the datatable is incorrect. You don't need to explicitly quote quotes in the selector; you just need to concatenate the strings like this:
var table = $("#" + tableid).DataTable();
That should work.

You mean this?
console.log(tableid);
var table = $('#' + tableid).DataTable();

ID Selector correct format -> $(“#id”)
Description: Selects a single element with the given id attribute.
var table = $('#' + tableid).DataTable();
Take a look at documentation: https://api.jquery.com/id-selector/

getting id of a input using id from another element using jquery

I'm trying to get the id of an input using jquery. What I do is I get the id of a button I click, then I concatenate the string to get the id of the element I want to have. But when I get the var picloc to show, it says undefined. How do I get the id of the hidden input?
$('.photo-frame').click(function (){
var id = this.id;
var picloc = $('#'+id+'_location').val();
$('#picture-selected').html(id);
});
<span class="photo-frame" id="<?php echo $filetitle2;?>">
</span>
<input id="<?php echo $filetitle2;?>_location" type="hidden">

If the hidden element is just the next of span in DOM then You can use following script.
$('.photo-frame').click(function (){
var hidden_element = $(this).next('input:hidden').val();
});

Try this:
$('.photo-frame').click(function (){
var id = $(this).attr('id');
var picloc = $('#'+id+'_location').val();
$('#picture-selected').html(id);
});

var id = this.id;
has some problems.
this refers to the document's itself. You should surround it with a $() in order to point the clicked element. And I do not know if [object].id is usable.
Change the line as the following.
var id = $(this).attr('id');

Are you sure to use the above block of codes inside the $(document).ready(function(){ ... }); or the page itself.

You can try this:
var currentId = $('#element').attr('id');
This will only work provided that you have a valid jQuery object $(this), eg:
var currentId = $(this).attr('id');

Dynamically add rows into a table using data from another table-jQuery

I have two table on my page like the picture shown here.
What I want to do is:
select rows in the Source Table
read the data in ID field, Name field from the Source Table, and also the value of radio button.
Form these data as rows of Target Table and append these rows into Target Table.
Now Im using two arrays to store the ID and Name that read from Source Table, but im a bit confused about how to form a row for the Target Table.
$('#btnLinkCase').click(function (event) {
var caseID = $('#caseID').text();
var linkedIDArr = []; //array list for selected id
var linkedNameArr = []; //array list for selected name
$('#linkCaseTable tbody tr td:nth-child(2)').each(function (index, el) { //store each paire of <tr> into array
linkedIDArr.push(el);
});
$('#linkCaseTable tbody tr td:last-child').each(function (index, el) { //store each paire of <tr> into array
linkedNameArr.push(el);
});
$.each(linkedCaseIDArr, function (index, val) {
//whats next?
});
});
Please see all source code here
Any ideas of doing this? Thanks in advance
Edit:
If multiple rows are selected they will use the same value from the radio button. eg: two rows are selected and "Type 1" is checked. In target table, their relationship all are "Type 1". I hope I have explained myself..

Try:
$('button').click(function (event) {
$("#sourceTable tr:gt(0)").each(function(){
var th = $(this);
console.log("dfg")
if($(th).find("input[name='link-cbx']").is(":checked")){ //assuming ids are unique remove condition if you do notwant so
var id = $(th).find("td:eq(1)").text();
var name = $(th).find("td:eq(7)").text();
var type = "Type "+$("input[name='linkType']:checked").val();
if($("#targetTable:contains('"+id+"')").length < 1){
$("#targetTable").append("<tr><td>"+id+"</td><td>"+name+"</td><td>"+type+"</td></tr>");
}
}
});
});
Updated fiddle here.

How to construct the id of an element and perform actions on it in JQuery?

I have a button in my table row which is having an id btn_number_$i. On clicking the button I want to show the table row having id row_$i, which is initially hidden.
Here is my PHP code to create the two table rows:
echo "<tr><td>"."<button id= \"btn_number_$i\" class='btn info toggler' >Info <i class='icon-arrow-down'></i></button>"."</td></tr>";
echo "<tr id='row_$i' class='info_row'><td>Hello There!!</td></tr>";
And below is my jQuery code.
I am trying to construct the similarly named row id and perform .show on it. But I am not getting the desired result.
$(function () {
$('.info_row').hide(); // first I need to hide all the second rows.
$('.toggler').click(function () {
var currentId = $(this).attr('id');
console.log(currentId);
var lastChar = currentId.substr(currentId.length - 1); //Herein I am trying to extract the last character from btn_number_$i which is $i and then appending it with 'row_'
var rowId = 'row_' + lastChar;
console.log(rowId); // I am able to get the current value in console log.
$('#rowId').show(); // But even after all that i am not able to show the element.
});
});
Any help will be thankfully appreciated.

You are not using the variable rowId containing id you constructed but using rowId a string literal. The selector you have will be looking element with id = rowId
Change
$('#rowId').show();
To
$('#' + rowId).show();