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.
Related
I am using Framework7 to build a mobile app. Using the popup and request features, I am dynamically building an html table with JSON data as follows:
//Do something when popup is opened
$$(document).on('popup:opened', '.popup-airconSearch', function (e) {
//Show preloader
app.preloader.show();
//Request json data from URL
app.request.json('my-URL', function (data) {
var tableHtml = '';
for(var i = 0; i < data.length; i+=1){
tableHtml+= '<tr><td class="numeric-only">' +data[i].brand+ '</td> <td class="numeric- only">' +data[i].model+ '</td></tr>';
}
//Add rows to HTML table
$$('.data-table #airconDatabase').html(tableHtml);
app.preloader.hide();
})
})
The JSON URL also includes an ID field and I am trying to log the ID of each entry when a table row is clicked. I have updated the above function with:
$$('.data-table #airconDatabase tr').on('click', e => {
var id = data[i].regnumber;
console.log (id);
})
However the console logs ID as underfined. If I change it to
var id = data[0].regnumber;
Then the first JSON entry regnumber field is logged to console no matter which table row is clicked. If I change it to
var id = data[1].regnumber;
Then the second JSON entry regnumber field is logged and so on.
Where am I going wrong?
My solution:
Firstly build the dynamic HTML table with a row ID from the JSON data:
tableHtml+= '<tr id="' +data[i].am_5_regnumber+ '"><td class..
Then get the row ID when a table row is clicked:
$$('.data-table #airconDatabaseTable tbody tr').on('click', function (e) {
var zaf = $$(this).closest('tr').attr('id');
console.log (zaf);
})
In addition to the above, I had to add an ID to the HTML table and not just the table body.
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
I have the following code:
var table = $("#b-table");
table.find('tr').each(function (i) {
var $tds = $(this).find('td'),
qLine = $tds.eq(0).text(),
qPartNumber = $tds.eq(1).text(),
qComments = $tds.eq(5).val();
console.log(qLine);
console.log(qPartNumber);
console.log(qComments);
});
qLine and qPartNumber are copying over fine, as these are text values within the td element, but qComments is not copying over, as within the td element is another input element, like so:
<td><input class="qComments" type="text"></td>
I've tried using:
$tds.eq(5).val();
$tds.eq(5).html();
$tds.eq(5).text();
$tds.input.eq(5).val();
$tds.eq(5).input.val();
and none of these capture the value of the input - and the last two error out for bad syntax.
Try something like this
$tds.eq(5).find("input").val();
I have a datatable containing a list of Cars. each row in the html contains a Car ID. I have added checkbox column to the first cell in my datatable - if it is checked the row is highligted to indicate to the user they have selected that row. What I waht to do is get all the IDs of all the cars a user has selected on clicking a button on the page. (also there are other columns in the table row where I have checkboxes (i.e - a Manual column or an Automatic column which will somtime be checked - like in column 5 ot 6 in the table)
so this is part of the cshtml for my page..
#foreach (var car in Model.Cars)
{
<tr carId="#Html.DisplayFor(modelItem => car.CarID)">
<td class="table-data">
<input id="SelectIndividual" name="Select" type="checkbox" />
</td>
//more stuff set in other tds in table
Then this is the JS I have for the page so far.
$('#GetSelectedCars').click(function (event) {
var cars= new Array();
carsListTable.find("tr").each(function (index, para) {
$('tr').find('td:input:checked:first').each(function () {
var car= new Object();
alert($(this).parent().parent().attr("carId"));
car.ID = $(this).parent().parent().attr("carId");
cars.push(car);
});
});
var jsonString = $.toJSON(cars);
I want to then return the json string to my controller (I do this by passing the value into a hidden field on my model and then deserialize - but at the minute I am getting it as empty. My problem is getting the best way to get the id from the row if it is checked?
You can use the selectors :checkbox:checked and use the jQuery.map to convert the array. The jQuery.closest() method will give the closest ancestor matching the given selector.
var cars = carsListTable.find('.table-data :checkbox:checked').map(function(i, v){
return {
ID : $(v).closest('tr').attr('carId')
}
});
Demo Fiddle
Note: The id of elements should be unique in a document so the id of the checkbox should be removed or has to be suffixed or prefixed by a dynamic value like the car id.
First, you should use class instead id for elements that will be present more than once. I suggest change #SelectIndividual for .SelectIndividual on the checkbox input). Another thing you should change is the carId attribute, because is not semantic valid. You should use custom data attributes instead. This is how your code should look like:
HTML
#foreach (var car in Model.Cars)
{
<tr data-carID="#Html.DisplayFor(modelItem => car.CarID)">
<td class="table-data">
<input id="SelectIndividual" name="Select" type="checkbox" />
</td>
Jquery
$('#GetSelectedCars').click(function (event) {
var cars= new Array();
$('SelectIndividual:checked').each(function () {
var car= new Object();
car.ID = $(this).parent().parent().data('carID');
cars.push(car);
});
});
//keep doing things
I would suggest to use the data-* attributes that are valid HTML5 as well as the jQuery.data() methods for the id of the car.
Can you assign a class to all checkboxes in first column and then try this
$('.cbClass:checked').each(function () {
tr = $(this).closest('tr');
// use the row
})
In my web application, I've set of checkboxes which on check populate a textbox above them.(If more than one checkbox is selected, then their values appear in the textbox separated by commas).
These set of checkboxes appear as rows in my HTML table.
Here's my HTML code.
<input type="text" id="newContactComment<%=rCount %>" name="newContactComment" size="45">
<input type="checkbox" id="commentText<%=rCount %>" name="commentText" value="<%=c.getComment_text() %>"
onclick="javascript:updateTextArea(<%=rCount%>);">
And the corresponding JS function is as follows:
function updateTextArea(rCount) {
var allVals = new Array();
$("#contactInfo input['commentText' + rCount]:checked").each(function() {
(allVals).push($(this).val());
});
$("#newContactComment" + rCount).val(allVals);
}
The rCount variable in the above function is the row # of my table.
Using this above, I'm not getting the expected behaviour..
For ex. If for row 1 of my table, I check chkbox 1 and 2, it correctly gets populated with values of those checkboxes. Now, for 2 of my table, I check only chkbox 3, it gets populated with the values 1,2 and 3 and not only 3 as I expect it to.
Any help will be greatly appreciated.
It would be better to use jQuery to set an event handler rather than setting it inline.
You want to use the onchange event not the onclick event.
If you add class names of checkboxes (or whatever you want) to the checkboxes the following will work:
$("input.checkboxes").change(function(){ //when checkbox is ticked or unticked
var par = $(this).closest("tr")[0];
var parID = par.id;
var patt1=/([0-9]+)$/g;
var rCount = parID.match(patt1); //Gets number off end of id
var allVals = new Array();
//Get all checkboxes in current row that are checked
$(par).find("td input.checkboxes:checked").each(function() {
allVals.push($(this).val());
});
$("#newContactComment" + rCount).val(allVals);
allVals = null; //empty array as not needed
});
I believe this or something along these lines will do what you want
You're trying to use the rCount variable from within the quoted string. Try this instead:
$("#contactInfo input['commentText" + rCount + "']:checked")