I'm making a table with a for each loop.
In every row i want to add a image but with different onclicks.
This is what i got now. All the "onclicks" are edited to the last for each round.
function cart(){
count = readCookie("count");
tableRow = "";
for (i = 1; i <= count; i++){
item = "item" + i;
Cookie = readCookie(item);
if (!(Cookie == null)){
row = new Array();
row = Cookie.split("|");
tableRow += "<tr>"
+ "<td>" + row[0] + "</td>"
+ "<td>" + row[1] + "</td>"
+ "<td>" + row[2] + "</td>"
+ "<td>" + row[3] + "</td>"
+ "<td>" + row[4] + "</td>"
+ "<td>" + row[5] + "</td>"
+ "<td>" + row[4] * row[5] + "</td>" + "<td>"
+ "<a href=''><img src='img/delete.png' onclick='editCart(item);'></a>"
+ "</td>" + "</tr>";
}
}
document.write(tableRow);}
I know cookies are not the best way to do it but it's a school assignment.
Thats why even if you only like to give a hint i still would appreciate it.
"<a href=''><img src='img/delete.png' onclick='editCart(item);'></a>"
Every onclick call will be the same.
"<a href=''><img src='img/delete.png' onclick='editCart(\""+item+"\");'></a>"
This will generate the outputlink dynamically.
Related
Some weeks ago I developed a code that takes some information from a spreadsheet each time a user submit a form, and then, send me an email with the information completed. It works really well.
However, I am intending to add a Ticket number in the first column of the sheet (without adding it in the google form) but it is not being recognized by my code.
Do you have any clue about how could I add this first column to my email each time I receive a new submit?
I attach my code.
function formSubmitReply(e) {
// VARIABLES
var ticketNo;
var alUser = e.values[1];
var country = e.values[3];
var language = e.values[2];
var category = e.values[4];
var title = e.values[5];
var questions = e.values[6];
var attach = e.values[7];
var entityEn = e.values[8];
var categoryEn = e.values[9];
var titleEn = e.values[10];
var questionsEn = e.values[11];
var attachEn = e.values[12];
var userEmail = "nam.hr#airliquide.com";
var msgFr =
// Add table style and format the cells with th and tr
"<table border='1' border-radius='5px' style='border-collapse:collapse; font-family:sans-serif;'>" +
"<tr>" +
"<th>Employé AL</th>" +
"<th>Sélection du pays</th>" +
"<th>Langue préférée</th>" +
"<th>Catégorie</th>" +
"<th>Sujet</th>" +
"<th>Contenu de la demande</th>" +
"<th>Pièce jointe</th>" +
"<th>#</th>" +
"</tr>" +
"<tr>" +
"<td>" + alUser + "</td>" +
"<td>" + country + "</td>" +
"<td>" + language + "</td>" +
"<td>" + category + "</td>" +
"<td>" + title + "</td>" +
"<td>" + questions + "</td>" +
"<td>" + attach + "</td>" +
"<td>" + ticketNo + "</td>" +
"</tr>" +
"</table>";
var msgEn =
// Add table style and format the cells with th and tr
"<table border='1' style='border-collapse:collapse; font-family:sans-serif;'>" +
"<tr>" +
"<th>AL user</th>" +
"<th>Country</th>" +
"<th>Preferred Language</th>" +
"<th>Category</th>" +
"<th>Title</th>" +
"<th>Question</th>" +
"<th>Attachments</th>" +
"<th>#</th>" +
"</tr>" +
"<tr>" +
"<td>" + alUser + "</td>" +
"<td>" + entityEn + "</td>" +
"<td>" + language + "</td>" +
"<td>" + categoryEn + "</td>" +
"<td>" + titleEn + "</td>" +
"<td>" + questionsEn + "</td>" +
"<td>" + attachEn + "</td>" +
"<td>" + ticketNo + "</td>" +
"</tr>" +
"</table>";
MailApp.sendEmail({
to: userEmail,
subject: 'NAM HR Mailbox | ' + categoryEn + category,
htmlBody: (language=="English") ? msgEn : msgFr,
name: alUser,
replyTo: alUser
});
}
Solution:
You need to add the first column manually in the spreadsheet then add this code to fill up the values every form submit:
function formSubmitReply(e) {
var ss = SpreadsheetApp.getActive();
var id = e.range.getRow();
var startNum = 850; // to start the entries from T0850
var control = startNum + id - 2;
var ticketNo = "T"+control.toString().padStart(4,"0");
ss.getActiveSheet().getRange(id,1).setValue(ticketNo);
// VARIABLES
var alUser = e.values[1];
var country = e.values[3];
.....
The rest of the code should be the same as with your question.
Sample Output:
Having a few issues trying to get this function output to an ajax table (working fine) and an input box called connectsList1.
i cannot get it to spit out into the input box without error, the error is
Uncaught TypeError: Cannot set property 'innerHTML' of null
and
connectsList1 is not defined
function getConnections(txt1) {
func_getConnections(
function (response) {
var sortorder = txt1;
var arr = response;
var i;
var Count;
var mCount;
var oCount;
var out =
"<thead>"
for (i = 0; i < arr.length; i++) {
out +=
"<tr>" +
"<tbody>" +
"<tr class=\"" + ReturnValuesAsColor(arr[i].o, arr[i].m, arr[i].server_proc) + "\">" +
"<td>" + arr[i].id + "</td>" +
//"<td>" + arr[i].user_id + "</td>" +
"<td>" + arr[i].user_name + "</td>" +
"<td>" + arr[i].workstation_name + "</td>" +
"<td>" + (!!arr[i].ip_address ? arr[i].ip_address : '') + "</td>" +
"<td>" + formatDateTime(arr[i].connect_date, 'datelongtime') + "</td>" +
"<td>" + formatDateTime(arr[i].refresh_date, 'datelongtime') + "</td>" +
"<td>" + (!!arr[i].app_ver ? arr[i].app_ver : '') + "</td>" +
"<td>" + (!!arr[i].app_date ? formatDateTime(arr[i].app_date, 'shortdate') : '') + "</td>" +
"<td>" + Messages_flag(arr[i].get_messages_flag) + "</td>" +
"<td>" + FixNumbers(arr[i].message_type_flags) + "</td>" +
//"<td>" + arr[i].o + "</td>" +
//"<td>" + arr[i].m + "</td>" +
"<td>" + arr[i].group_name + "</td>" +
//"<td>" + arr[i].server_proc + "</td>" +
"<td> <button id=\"DelImg1\" type=\"button\" name=\"btnsubmit\" class=\"ui-button ui-widget ui-state-default ui-corner-all\" onclick=\"clearText('<%= result.ClientID%>'); CopyId(" + arr[i].id + "); return Message(" + arr[i].id + ")\" >Delete</button> </td>" +
"</tr>" +
"</tbody>";
mCount = 0
if (arr[i].m != 0) {
mCount += 1;
} else if (arr[i].o != 0) {
oCount += +1;
} else if (arr[i].o == 0 & arr[i].m == 0) {
Count += 1;
}
document.getElementById("dtBody1").innerHTML = out;
document.getElementById('ConnectsList1').innerHTML = out;
ConnectsList1 = " Connection list: " & Count + oCount + mCount & " connection(s) Main Application : " & Count & " Online : " & oCount & " Mobile : " & mCount;
}})};
Any help or advice welcome, still learning ajax myself
document.getElementById("dtBody1") can not find any tag with id dtBody1. Make sure your HTML has an element with that ID.
And remember to declare the ConnectsList1 variable to avoid the second error.
Hi I'm stumped as to why the data in my table is returned undefined. I think I'm close.
Please check out my jsfiddle:
$(document).ready(function() {
$.getJSON( "http://www.corsproxy.com/dvl.thomascooper.com/data/json_return.json", function( data ) {
//static table head
$('table.stats').append("<th>" + "</th>" + "<th>" + "Date" + "</th>" + "<th>" + "Brand" + "</th>" + "<th>" + "Author" + "</th>" + "<th>" + "Title" + "</th>" + "<th>" + "Posts" + "</th>" + "<th>" + "Exposure" + "</th>" + "<th>" + "Engagement" + "</th>");
//loop through json data
$.each(data.data.rows,function( i, val ){
//+1 to number each row starting at 1
var rowNum = i + 1;
//create table rows and cell and populate with data
$('table.stats').append( "<tr>" + "<td>" + rowNum + "</td>" + "<td>" + val.date + "</td>" +"<td>" + val.brand_id + "</td>" + "<td>" + val.author + "</td>" + "<td>" + val.title + "</td>" + "<td>" + val.posts + "</td>" + "<td>" + val.reach + "</td>" + "<td>" + val.interaction + "</td>" + "</tr>");
});
});
});
fiddle: http://jsfiddle.net/tommy6s/eLbq2wvh/
$.each(data.data.rows,function( i, val ) {
Here, val is not object (Your data told me that)
So you could not access property that undefined like this: val.date
I think, here is what you want:
$(document).ready(function() {
$.getJSON( "http://www.corsproxy.com/dvl.thomascooper.com/data/json_return.json", function( data ) {
//static table head
$('table.stats').append("<th>" + "</th>" + "<th>" + "Date" + "</th>" + "<th>" + "Brand" + "</th>" + "<th>" + "Author" + "</th>" + "<th>" + "Title" + "</th>" + "<th>" + "Posts" + "</th>" + "<th>" + "Exposure" + "</th>" + "<th>" + "Engagement" + "</th>");
//loop through json data
$.each(data.data.rows,function( i, val ){
//+1 to number each row starting at 1
var rowNum = i + 1;
//create table rows and cell and populate with data
$('table.stats').append( "<tr>" + "<td>" + rowNum + "</td>" + "<td>" + val[0].value + "</td>" +"<td>" + val[1].value + "</td>" + "<td>" + val[2] + "</td>" + "<td>" + val[3].label + "</td>" + "<td>" + val[4].values[0] + "</td>" + "<td>" + val[5].values[0] + "</td>" + "<td>" + val[6].values[0] + "</td>" + "</tr>");
});
});
});
If you look at the returned json - rows is an array of arrays not an array of objects.. You failed to take this into consideration.
$.each(data.data.rows[0],function( i, val ){
Also you are trying to access the value of the data by its value instead of by its key.
"<td>" + val.field + "</td>" +"<td>" + val.type + "</td>"
Checkout this jsbin for example
You are trying to reference the data as if it were:
rows: [ { date: '', brand_id: '', author: '', etc }, next set of fields]
What you are actually getting is:
rows: [ [ object with field data, object with field data, etc], another array of field data objects, etc]
Here is a beginning to a script that will be flexible in how things will be returned. I've left out many of the cases you'll need to deal with:
//loop through json data
$.each(data.data.rows,function( i, val ){
//+1 to number each row starting at 1
var rowNum = i + 1, fields = {};
// Find fields
$.each(val, function(j, fieldData) {
if(typeof fieldData == 'string') {
fields.author = fieldData;
} else if(fieldData.field == 'title') {
fields.title = fieldData.label;
} else {
fields[fieldData.field] = fieldData.value;
}
});
//create table rows and cell and populate with data
$('table.stats').append( "<tr>" + "<td>" + rowNum + "</td>" + "<td>" + fields.date + "</td>" +"<td>" + fields.brand_id + "</td>" + "<td>" + fields.author + "</td>" + "<td>" + fields.title + "</td>" + "<td>" + fields.posts + "</td>" + "<td>" + fields.reach + "</td>" + "<td>" + fields.interaction + "</td>" + "</tr>");
});
I am creating a Jquery Mobile page which includes a table. The table will display users. Table rows include checkboxes in the first cell, followed by the users information. At the bottom of the table there is a button (Edit). When this button is clicked I want the rows which have their check boxes ticked to be highlighted and the cells in the row editable.
I want to highlight/make editable rows on the click of the edit button, when
a) the rows checkbox is ticked.
The table has been created using a JavaScript loop (function is loaded on page load).
var UsersHTML = "<table class='full_width_table info_table_style ui-body-d ui-shadow table-stripe ui-responsive'>" +
"<thead>" +
"<tr class='ui-bar-b schedule_row'>" +
"<th></th>" +
"<th>UserID</th>" +
"<th>First Name</th>" +
"<th>Surname</th>" +
"<th>Home Location</th>" +
"</tr>" +
"</thead>" +
"<tbody>";
for (s = 0; s < 15; s++) {
//contenteditable='true'
UsersHTML += "<tr class='schedule_row'>" +
"<td class='user_check_cell'>" +"<input type='checkbox'>" + "</td>" +
"<td> " + + "</td>" +
"<td>" + + "</td>" +
"<td>" + + "</td>" +
"<td>" + + "</td>" +
"<td>" + + "</td>" +
"<td align='right'";
UsersHTML += "</td></tr>";
}
UsersHTML += "</tbody></table>";
$("#usersContent").html(UsersHTML);
I have used a div to display the table on the page:
<div id="usersContent">
</div>
Any help would be great!
You can use event delegation.
$('#userContent').on('click', '.user_check_cell input[type=checkbox]', function () {
var $input = $(this);
$input.closest('tr').toggleClass('highlighted', $input.prop('checked'));
});
This adds the event listener to #userContent and listens for events on that and if the element that triggered that click event matches the selector in on it goes though with the event.
The toggleClass just adds the class "highlighted" when the input that was clicked is checked.
Try this:
html
<div id="usersContent">
</div>
js:
var UsersHTML = "<table class='full_width_table info_table_style ui-body-d ui-shadow table-stripe ui-responsive'>" +
"<thead>" +
"<tr class='ui-bar-b schedule_row'>" +
"<th></th>" +
"<th>UserID</th>" +
"<th>First Name</th>" +
"<th>Surname</th>" +
"<th>Home Location</th>" +
"</tr>" +
"</thead>" +
"<tbody>";
for (s = 0; s < 15; s++) {
//contenteditable='true'
UsersHTML += "<tr class='schedule_row' id='testTr_"+s+"'>" +
"<td class='user_check_cell'>" +"<input type='checkbox' id='chk_"+s+"' specId='"+s+"' class='hightlight' onclick='changeHight(this);'>" + "</td>" +
"<td> " + + "</td>" +
"<td>" + + "</td>" +
"<td>" + + "</td>" +
"<td>" + + "</td>" +
"<td>" + + "</td>" +
"<td align='right'";
UsersHTML += "</td></tr>";
}
UsersHTML += "</tbody></table>";
$("#usersContent").html(UsersHTML);
window.changeHight = function(obj){
var specTr = $(obj).attr("specId");
if($(obj).prop("checked"))
$("#testTr_"+specTr).addClass("highlight");
else
$("#testTr_"+specTr).removeClass("highlight");
}
css:
.highlight{
background: green;
}
fiddle
First, I would encourage you to look into some sort of framework to make this easier. jsRender, Knockout.js and Angular.js would all make this cleaner and easier.
Without going down any of those roads, I would do something like this...
Add a couple classes to help us out....
.display input {
border: none;
color: #000;
}
.hightlight {
background-color: #ffffbb;
}
If you want to make the cells editable, you need to wrap them in an input. Disable the input and remove the border when in "display mode"...
$('#userTable').on('click', 'input[type="checkbox"]', function() {
var row = $(this).closest('tr');
row.removeClass('display');
row.addClass('hightlight');
row.find('input').removeAttr('disabled');
})
I also changed your code a bit to add an array of users and add the user data to the table...
for (
s = 0; s < 15; s++) {
//contenteditable='true'
UsersHTML += "<tr class='schedule_row display'>" +
"<td class='user_check_cell'>" +"<input type='checkbox'>" + "</td>" +
"<td> " + s + "</td>" +
"<td><input disabled='disabled' value='" + users[s].firstName + "'></input></td>" +
"<td>" + users[s].lastName + "</td>" +
"<td>" + users[s].location + "</td>";
UsersHTML += "</tr>";
}
Working fiddle here... http://jsfiddle.net/gRFD8/1/
The following code gets a JSON object and then spits its contents out into a <table>. The first time I do it I get my JSON content just fine. However, when I refresh, the refreshed data is stuck onto the bottom of my table. How do I refresh the data to show the new data only? I tried using .remove() but there was an obvious deleting and then a refresh of data.
$(function() {
$('#ReportedIssue').change(function() {
//$('.data').remove()
$.getJSON('/CurReport/GetUpdatedTableResults', function(json) {
for (var i = 0; i < json.GetDocumentResults.length; i++) {
$('#DocumentInfoTable').append(
"<tr class='data'>" +
"<td>" + json.GetDocumentResults[i].Document.DocumentId + "</td>" +
"<td>" + json.GetDocumentResults[i].Document.LanguageCode + "</td>" +
"<td>" + json.GetDocumentResults[i].ReportedIssue + "</td>" +
"<td>" + json.GetDocumentResults[i].PageNumber + "</td>" +
"</tr>"
);
};
});
});
});
Thank you,
Aaron
It will be more efficient to build the HTML as follows (and of course, solves the problem you're experiencing):
$(function() {
$('#ReportedIssue').change(function() {
//$('.data').remove()
$.getJSON('/CurReport/GetUpdatedTableResults', function(json) {
var str = '';
for (var i = 0; i < json.GetDocumentResults.length; i++) {
str += "<tr class='data'>" +
"<td>" + json.GetDocumentResults[i].Document.DocumentId + "</td>" +
"<td>" + json.GetDocumentResults[i].Document.LanguageCode + "</td>" +
"<td>" + json.GetDocumentResults[i].ReportedIssue + "</td>" +
"<td>" + json.GetDocumentResults[i].PageNumber + "</td>" +
"</tr>"
};
$('#DocumentInfoTable').html(str);
});
});
});