Develop Reference

How to get and store the values of a specific row in a table via JavaScript / jQuery

How can I store in an array of arrays in JavaScript / jQuery the values of each selected row of the table.
JSFiddle
The event to listen to would be (I think) when the 'Show selected' button is clicked.
For example in JS we would have an array like this:
result = []
result[0] = row1
result[0][1] = Gene value for row1 (Gene1)
result[0][2] = Variant value for row1 (Variant1)
result[0][7] = #5 value1 for row1
result[1] = row2
result[1][1] = Gene value for row2 (Gene2)
etc
...

You could do this just like so:
$("#show-selected").click(function () {
var results =[];
$(".variants-table-tbody tr").each(function (index,item) {
if($(item).find('[name="select-item"]').prop("checked")){
results.push([
[$(item).find("td").eq(1).text()],
[$(item).find("td").eq(2).text()],
[$(item).find("td").eq(3).text()],
]);
}
});
console.log(results);
});
this would create the data on checked rows in the format you described.
see https://jsfiddle.net/y4deut3s/

With something like this:
$("#show-selected").click(function () {
var tr = $("tr");
var array1 = [];
tr.each(function(index1, trCurrent) {
var array2 = [];
var trChildrens = $(trCurrent).children();
if(($(trChildrens[0]).children()[0]).checked){
trChildrens.each(function(index2, trChildrensCurrent) {
var innerHtml = $(trChildrensCurrent).html();
array2.push(innerHtml);
});
array1.push(array2);
}
});
console.log(array1);
});
TEST:

JavaScript Cloned Table Rows - reset value

I have a form/table set up that's cloning rows with specific valued names so that they can be processed separately once the form submits. All seems to be well unless you fill out information on the 5th row (the row being cloned) and then it copies all of the data over into the cloned row.
Is there an easy way to reset the values to NULL and 0 during the cloning process?
(I have two rows on bottom that are tallying/totalling each column, hence the tr:nth-last-child(2))
var totalRows = 5;
function addrow() {
totalRows++;
var clonedRow = $("table#maintable tr:nth-child(5)").clone(); //this will grab the 5th table row.
//get the textfield
var tfName = $("input.name",clonedRow);
var tfproA = $("input.proA",clonedRow);
var tfproB = $("input.proB",clonedRow);
var tfproC = $("input.proC",clonedRow);
var tfproD = $("input.proD",clonedRow);
var tfproE = $("input.proE",clonedRow);
var tfproF = $("input.proF",clonedRow);
var tfproG = $("input.proG",clonedRow);
var tfproH = $("input.proH",clonedRow);
var tfproI = $("input.proI",clonedRow);
var tfproJ = $("input.proJ",clonedRow);
var tfproK = $("input.proK",clonedRow);
var tfproL = $("input.proL",clonedRow);
var tfproM = $("input.proM",clonedRow);
var tfproN = $("input.proN",clonedRow);
//change their names
tfName.attr("name","name"+totalRows);
tfproA.attr("name","proA"+totalRows);
tfproB.attr("name","proB"+totalRows);
tfproC.attr("name","proC"+totalRows);
tfproD.attr("name","proD"+totalRows);
tfproE.attr("name","proE"+totalRows);
tfproF.attr("name","proF"+totalRows);
tfproG.attr("name","proG"+totalRows);
tfproH.attr("name","proH"+totalRows);
tfproI.attr("name","proI"+totalRows);
tfproJ.attr("name","proJ"+totalRows);
tfproK.attr("name","proK"+totalRows);
tfproL.attr("name","proL"+totalRows);
tfproM.attr("name","proM"+totalRows);
tfproN.attr("name","proN"+totalRows);
$("table#maintable tr:nth-last-child(2)").before(clonedRow); //add the row back to the table before the last 2nd to last row
console.log('done')
}

You can chain together a call to val()
tfName.attr("name","name"+totalRows).val(0) or
tfName.attr("name","name"+totalRows).val('')

How to simply get GridView's SelectedIndex value of a certain cell

The thing is this: I have a GridView control which is populated with data from an SQL table. Each column has simple data such as strings or int numbers. My last column is a "Select CommandField", which pops up a form when clicked. I am trying to make a function in JavaScript which needs to use the value of the first column of the selected row; how is the syntax for this?
Like in C# it would be
myGridView.Rows[myGridView.SelectedIndex].Cells[0].Text
so in JavaScript it should be something like
var grid = document.getElementById('myGridView');
var gridRow = grid.rows[<what_Should_I_Type_Here?>].cells[0].text
Thank you very much in advance!

var grid = document.getElementById('myGridView');
var gridRow = grid.rows[document.getElementById("myGridView").selectedIndex].cells[0].text;

function Redirect(row) {
var rowData = row.parentNode.parentNode;
var rowIndex = rowData.rowIndex;
var grid = document.getElementById('ContentPlaceHolder1_Grd_Dashboard');
var value = grid.rows[rowIndex].cells[0].innerText;
alert(value);
window.location = "PoTracking.aspx?Pid=" + value;
return false;
}

Create an array from JSON in Javascript

I've researched quite a bit on here and I can't seem to find something that will work for me. What I have is an application that I'm trying to have go out and return the next four bus arrival times for a bus stop. I am reaching out to an API that returns this data in a JSON file. The problem I am having is I can see my request go out via fiddler but I can't seem to get the data into an array. Below is the code that I'm dealing with right now. I'm trying to get the returned data into a table format which you can see I'm failing at.
Eventually I want to get a popup to appear when the user clicks on the Show me the next 4 bus arrival times but this was for testing purposes. I would love to have the users click on my button which calls this function and then something like a like table open with these values. If you can help with that within this code I would appreciate it as well.
JSON Data:
[{"ARRIVAL":"01:23P","ROUTE":"208","DIR":"E"},
{"ARRIVAL":"01:53P","ROUTE":"208","DIR":"E"},
{"ARRIVAL":"02:23P","ROUTE":"208","DIR":"E"},
{"ARRIVAL":"02:53P","ROUTE":"208","DIR":"E"}]
Code:
<script>
function getTimes(stopNumber) {
var busArrivalAPI = "http://blahblahblah/rtcTimes/" + stopNumber ";
$.getJSON(busArrivalAPI, function(busArrivals) {
var a = [];
for (var i = 0; i < busArrivals.length; i++) {
a[i] = [busArrivals[i].ROUTE, busArrivals[i].ARRIVAL, busArrivals[i].DIR];
document.getElementById("results").createElement("TR");
for (var b = 0; b < 3; b++) {
var x = document.createElement("TH");
var z = a[i][b];
var t = document.createTextNode(z);
x.appendChild(t);
document.getElementById('results').appendChild(x);
};
};
});
</script>
My DIV:
<div style="overflow-x:scroll; overflow-y:scroll;" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Bus Arrival Times', selected:true">
<table id = 'results'>
<tr>
<th>Route</th>
<th>Arrival Time</th>
<th>Direction</th>
</tr>
</table>
</div>
UPDATE: Ok, I've use the makeTable idea provide below and it works when I program as seen below hard coding the json data. However, when trying to use the $.getJSON I'm having some cross domain issues now and don't know how I can get my $.getJSON request working. Any input on how to get the data from my getJSON request work be great.
function getTimes(stopNumber) {
// This is the API address I need to hit. Trying to figure out how to incorporate that and remove the function getJSON where I have the data hard coded.
//var busArrivalAPI = "http://-----/rtcTimes/"+ stopNumber + "?jsoncallback=?";
function makeTable(busArrivals) {
// This will remove old values so table will only load current Times
var results = document.getElementById("results");
var rowCount = results.rows.length;
for (var x=rowCount-1; x>0; x--) {
results.deleteRow(x);
}
// This will populate the result table with the correct bus routes/times/direction
busArrivals.forEach(function(busArrival) {
var tr = document.createElement('tr');
var route = document.createElement('td');
route.appendChild(document.createTextNode(busArrival.ROUTE));
var arrival = document.createElement('td');
arrival.appendChild(document.createTextNode(busArrival.ARRIVAL));
var direction = document.createElement('td');
direction.appendChild(document.createTextNode(busArrival.DIR));
tr.appendChild(route);
tr.appendChild(arrival);
tr.appendChild(direction);
document.getElementById('results').appendChild(tr);
});
}
function getJSON(callback) {
var data = [{"ARRIVAL":"05:23P","ROUTE":"201","DIR":"E"},
{"ARRIVAL":"05:54P","ROUTE":"202","DIR":"E"},
{"ARRIVAL":"06:33P","ROUTE":"203","DIR":"E"},
{"ARRIVAL":"07:11P","ROUTE":"204","DIR":"E"}];
callback(data);
}
getJSON(makeTable);
};

I think you could write a separate function to build the table, like this:
function makeTable(busArrivals) {
busArrivals.forEach(function(busArrival) {
var tr = document.createElement('tr');
var route = document.createElement('td');
route.appendChild(document.createTextNode(busArrival.ROUTE));
var arrival = document.createElement('td');
arrival.appendChild(document.createTextNode(busArrival.ARRIVAL));
var direction = document.createElement('td');
direction.appendChild(document.createTextNode(busArrival.DIR));
tr.appendChild(route);
tr.appendChild(arrival);
tr.appendChild(direction);
document.getElementById('results').appendChild(tr);
});
}
var busArrivalAPI = 'http://blahblahblah/rtcTimes/'+ stopNumber;
$.getJSON(busArrivalAPI, makeTable);
In each iteration of the forEach loop, you construct a tr element, insert the tds and finally put the whole thing inside the DOM.

You're creating a TR element, but never appending it to the table. Instead, you're appending the TH elements directly to the table, which is invalid.
function getTimes(stopNumber) {
var busArrivalAPI = "http://blahblahblah/rtcTimes/" + stopNumber;
$.getJSON(busArrivalAPI, function(busArrivals) {
var table = document.getElementById('results');
for (var i = 0; i < busArrivals.length; i++) {
var a = [busArrivals[i].ROUTE, busArrivals[i].ARRIVAL, busArrivals[i].DIR];
var row = document.createElement("TR");
for (var b = 0; b < 3; b++) {
var x = document.createElement("TH");
var z = a[b];
var t = document.createTextNode(z);
x.appendChild(t);
row.appendChild(x);
};
table.appendChild(row);
};
});
}
I'm not sure why you need the a array. If you just want to change get the object properties into an array so you can iterate over it, you can do that with a 1-dimensional array, you don't need to save all the other rows in a 2-dimensional array. I've changed a to a single array.

Need to call back an array in Google Script

I am attempting to send an array through the callback and having no luck. Let me explain my intent and perhaps an expert out there can send me some ideas for how to solve this dilema.
I have creates a spreadsheet that collects data. I then have a UI script which pulls row data into a flex table for a user to process by clicking a checkbox. I created a separate flex table that contains the checkboxes which the user checks or leaves blank. In my script I need to send an array that contains the checkbox condition. Why? Because I also need the row # or array placement that I can push to the spreadsheet to send the correct updated status for the data.
The script only pulls data that needs action into the UI. Thus I may be acting on Rows 1,3,4,5,and 8 of the spreadsheet but on the UI flextable the row that correspond to the data are rows 1,2,3,4,5 thus the row assignments don't match. BUT if I use an array I can capture that the row pulled was 1,3,4,5,and 8 and then update the spreadsheet accordingly.
However, that is the problem when I try to callback my array labeled offset[inc] I cannot get it to work I get run errors of cannot find method addcallback and cannot get it to work.
Recommendations on how to send an array through the addcallback method or alternate recommendations would be appreciated.
Thanks,
Sean Nutzman
function doGet(e){
var app = UiApp.createApplication();
//Create Caption Panel
var captionPanel = app.createCaptionPanel('Detention Attendance').setWidth('350px').setHeight('75px').setStyleAttribute('fontWeight', 'bold').setStyleAttribute('fontSize', '24px');
//Add a widget to caption panel
captionPanel.add(app.createLabel("Please enter attendance for Detention by clicking the checkbox next to the student's name if they were present. Then click Sumbit."));
//add the caption panel to the application
app.add(captionPanel);
var panel = app.createHorizontalPanel();
var flexTable = app.createFlexTable().setStyleAttribute('border', '2px solid black')
.setStyleAttribute('borderCollapse','collapse')
.setBorderWidth(2)
.setCellSpacing(50)
.setCellPadding(6);
//Get Data from spreadsheet
var spreadsheetId = '0Aup0nXQ4K-pydFREb1FFcTFYX3lOenNQenR1Q01jQ1E'; //Change this to the Spreadsheet ID
var dataArray = getData(spreadsheetId);
var inc = 1;
//Load data into table cells
for (var row = 0; row<dataArray.length; row++) {
var booleanCheck = dataArray[row] [17];
var offset = new Array();
if (booleanCheck == "" || booleanCheck == "Date Served") {
if (row > 0) {
Logger.log("Row value = " + row);
var ticketDate = dataArray[row] [0];
var dateStamp = Utilities.formatDate(new Date(ticketDate), "America/Chicago", "MM/dd/yyyy");
dataArray[row] [0] = dateStamp;
var ticketDate2 = dataArray[row] [16];
var dateStamp2 = Utilities.formatDate(new Date(ticketDate2), "America/Chicago", "MM/dd/yyyy");
dataArray[row] [16] = dateStamp2;
flexTable.setText(row, 1, dataArray[row][2].toString());
flexTable.setText(row, 0, dataArray[row][0].toString());
flexTable.setText(row, 2, dataArray[row][16].toString());
offset[inc] = row; inc++;
Logger.log('Inc variable = ' + inc);
Logger.log('Offset = ' + offset[inc-1]);
} else {
Logger.log("Inside ELSE row is not > 0");
Logger.log("Row value here = " + row);
flexTable.setText(0, 1, "Student's Name").setStyleAttribute(0, 1, 'fontWeight', 'bold');
flexTable.setText(0, 0, "Date Assigned").setStyleAttribute(0, 0, 'fontWeight', 'bold');
flexTable.setText(0, 2, "Date Delinquent").setStyleAttribute(0, 2, 'fontWeight', 'bold');
}
}
}
Logger.log(offset);
panel.add(flexTable);
var check1 = app.createCheckBox().setName('ch1');
var check2 = app.createCheckBox().setName('ch2');
var check3 = app.createCheckBox().setName('ch3');
var check4 = app.createCheckBox().setName('ch4');
var check5 = app.createCheckBox().setName('ch5');
var check6 = app.createCheckBox().setName('ch6');
var check7 = app.createCheckBox().setName('ch7');
var check8 = app.createCheckBox().setName('ch8');
var check9 = app.createCheckBox().setName('ch9');
var submitButton = app.createButton("Submit");
var handler = app.createServerClickHandler('updateStatus');
handler.addCallbackElement(check1)
.addCallbackElement(check2)
.addCallbackElement(check3)
.addCallbackElement(check4)
.addCallbackElement(check5)
.addCallbackElement(check6)
.addCallbackElement(check7)
.addCallbackElement(check8)
.addCallbackElement(check9)
.addCallbackElement(offset);
submitButton.addClickHandler(handler);
handler.addCallbackElement(check1)
.addCallbackElement(check2)
.addCallbackElement(check3)
.addCallbackElement(check4)
.addCallbackElement(check5)
.addCallbackElement(check6)
.addCallbackElement(check7)
.addCallbackElement(check8)
.addCallbackElement(check9)
.addCallbackElement(offset);
var table = app.createGrid(11,1).setStyleAttribute('border', '2px solid black')
.setStyleAttribute('borderCollapse','collapse')
.setBorderWidth(2)
.setWidth('75px')
.setCellSpacing(5)
.setCellPadding(6);
table.setStyleAttributes({textAlign: "center"});
table.setStyleAttribute('fontWeight', 'bold').setText(0, 0, 'Attendance');
table.setWidget(1,0, (check1));
table.setWidget(2,0, (check2));
table.setWidget(3,0, (check3));
table.setWidget(4,0, (check4));
table.setWidget(5,0, (check5));
table.setWidget(6,0, (check6));
table.setWidget(7,0, (check7));
table.setWidget(8,0, (check8));
table.setWidget(9,0, (check9));
table.setWidget(10,0,(submitButton));
panel.add(table);
app.add(panel);
app.close();
return app;
}

What I usually do is to convert the array to a string and write it on the widget's tag.
Then I can retrieve it using e.parameter.widgetName_tag in the handler function. At this point I can split it to get back the array : e.parameter.widgetName_tag.split(',');
You'll have to be careful when choosing the join and split character since your data might contain a comma (which is the default separator in arrays)... I often use a | or any other 'uncommon' character (Ë,Í;∆) in combination with join('∆') and split('∆') so I'm sure I get the array back as it should.
Of course the widget must be included in the callBackElement but this is easily achieved by using the highest level parent UiApp element as callBackElement.
Last comment : try to use widget Ids that will simplify your life ... for example use Ids containing a number that corresponds to the array index ( chk0, chk1, chk2...) so that you can easily retrieve the numeric value to use in your handler function using something like this :
Number(e.parameter.source.replace(/[a-z]/ig,''))
which will give you a number that identifies which checkBox is the origin of the handler call so you can write :
var arrayElement = e.parameter.widgetName_tag.split(',')[Number(e.parameter.source.replace(/[a-z]/ig,''))];

var array = ['foo','poo'];
var arrayString = JSON.stringify(array);
At that point, just attach arrayString to a callback element and voila! Then in the handlerFunction, you access it out with e.parameter.arrayString and then parse it to return it back to an array like so:
var array = JSON.parse(e.parameter.arrayName);
//array = ['foo','poo']