I am using below javaScript code to create table in runtime. And i somewhat assumed to append a value into the ID of the button. Will it work. I am confused because of double quotes.
function createTable(){
EmployeeManagement.getList(function(data){
var employee = data;
var x = "<table border= 1 >";
x+="<thead> " + "<tr>" + "<td>" + "Check" + "</td><td>" + "ID" + "</td><td>" + "Name" + "</td><td>" + "Age" + "</td><td>" + "Dept" + "</td><td>" + "Option" + "</td></tr></thead>";
for(i = 0; i<data.length; i++)
{
var id = data[i].id;
x+= "<tr>";
x+= "<td>" + "<input type=checkbox name=Employee value='emp'+id />"
x+= "<td>" + data[i].id + "</td><td>" + data[i].name + "</td>";
x+= "<td>" + data[i].age + "</td><td>" + data[i].dept + "</td>";
x+= "<td>" + "<input id='edit'+id type='button' value='Edit' onclick=edit(this.id) />" + "</td>";
x+= "</tr>";
}
x+= "</table>";
$('#tableHolder').html(x);
});
}
here, i want to append the id value, to the ID value id BUTTON.
I already coded for it. Will it work or how to make it work.
I can use jquery means, how???
Any suggestions would be appreciative...
Thanks
No it won't work. Just do it the same as with the other strings, use string concatenation:
"<input id='edit" + id + "' type='button' value='Edit' onclick=edit(this.id) />"
// --^ --^
Currently, you are generating invalid HTML. But you could have tried yourself to find this out ;)
Yes, this should work. Assuming the id is FOO, the html to generate is:
<input id='editFOO' type='button' ...
which can be done by splitting it up into three parts like so:
"<input id='edit" + id + "' type='button' ..."
Use string concatenation... Also your cells in subsequent rows should match the number of cells in your head row.
function createTable(){
EmployeeManagement.getList(function(data){
var employee = data;
var x = "<table border= 1 >";
x+="<thead> " + "<tr>" + "<td>" + "Check" + "</td><td>" + "Name" + "</td><td>" + "Dept" + "</td><td>" + "Option" + "</td></tr></thead>";
for(i = 0; i<data.length; i++)
{
var id = data[i].id;
x+= "<tr>";
x+= "<td>" + "<input type=checkbox name=Employee value='emp"+id+"' /> </td>";
x+= "<td>" + data[i].id + "</td><td>" + data[i].name + "</td>";
x+= "<td>" + data[i].age + "</td><td>" + data[i].dept + "</td>";
x+= "<td>" + "<input id='edit"+id+"' type='button' value='Edit' onclick=edit(this.id) />" + "</td>";
x+= "</tr>";
}
x+= "</table>";
$('#tableHolder').html(x);
});
}
In JavaScript vars inside a double quoted string are not interpreted. So you have to put the vars outside of the string. Replace e.g. this:
"<input type=checkbox name=Employee value='emp'+id />"
with this:
"<input type=checkbox name=Employee value='emp" + id "' />"
Related
I'm fetching the values from my table in ajax.
$(data.mesIzinTanimList).each(function (index, element) {
if (element.izinTanimiVarmi == 'yok')
tr = "<tr class='bg-warning text-warning-50' row='" + element.userId + "' >";
else
tr = "<tr class='bg-light text-white-50 ' row='" + element.userId + "' >";
tr += "<td>" + element.sicilNo + "</td>";
tr += "<td>" + element.adSoyad + "</td>";
tr += "<td>" + element.bagliOlduguKisi + "</td>";
tr += "<td>" + element.bagliOlduguKisiSicilNo + "</td>";
tr += "<td style='display:none'>" + element.bagliOlduguKisiId + "</td>";
tr += "<td> <button onclick= 'tanimlaBtn(" + element.userId + " , " + element.adiSoyadi + " ," + element.bagliOlduguKisiId + ", " + element.bagliOlduguKisi + ")' type='button' class ='btn btn-info'> Tanımla </button></td>";
tr += "</tr>";
$('#IzinTanimListe').append(tr);
});
I open a modal with the define Btn onclick feature.
function tanimlaBtn(userId, adSoyad, bagliOlduguKisiId, bagliOlduguKisi) {
document.getElementById('userId').value = userId;
document.getElementById('bagliOlduguKisiId').value = bagliOlduguKisiId;
document.getElementById('bagliOlduguKisi').value = bagliOlduguKisi;
document.getElementById('adSoyad').value = adSoyad;
}
The adSoyad and bagliOlduguKisi information appears as undefined. They should be string values.
How can I solve this?
The parameters for the function should be wrapped in doubles quotes and escaped e.g \"
Try replacing:
<button onclick= 'tanimlaBtn(" + element.userId + " , " + element.adiSoyadi + " ," + element.bagliOlduguKisiId + ", " + element.bagliOlduguKisi + ")'
With:
<button onclick='tanimlaBtn(" + element.userId + " , " + element.adiSoyadi + " ,\"" + element.bagliOlduguKisiId + "\", \"" + element.bagliOlduguKisi + "\")'
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.
I have button to add new row(s) to table.
In the table row have a column with touch spin.
I want to loop through Array(Items). to make a rows. But below code make a Error Uncaught TypeError: undefined is not a function at function tp0
function showtable() {
$('#showtable').html("");
for(var i in Items) {
var no = parseInt($('#tb tr').length) - 1;
var data = "<tr role='row' class='filter' >"
+ "<td>" + no
+ "</td>"
+ "<td>"
+ "<div class='form-group'>"
+ "<input id='touch" + i + "' type='text' value='1' name='touch" + i + "' /> "
+ "<script>"
+ "function tp" + i + " () {$(\"input[name=\'touch" + i + "\']\").TouchSpin(); alert('ttt');}"
+ "</scr" + "ipt>"
+ "</div>"
+ "</td>"
+ "</tr>";
$('#showtable').append(data);
var method_name = "tp";
window[method_name + i]();
}
}
Have any ideas thanks
Instead of adding functions like that with each row, you should just pass the row number as a variable to a predefined function:
function tp(index) {
$("input[name='touch" + index + "']").TouchSpin();
alert('ttt');
}
function showtable() {
$('#showtable').html("");
for (var i in Items) {
var no = parseInt($('#tb tr').length) - 1;
var data = "<tr role='row' class='filter' >"
+ "<td>" + no
+ "</td>"
+ "<td>"
+ "<div class='form-group'>"
+ "<input id='touch"+i+"' type='text' value='1' name='touch"+i+"' /> "
+ "</div>"
+ "</td>"
+ "</tr>";
$('#showtable').append(data);
tp(i);
}
}
I can't figure this out for the life of me. Jquery keeps closing the form that I create (instead of <tr><form> ... <td></td> ... </form></tr> it creates <tr><form></form>... I've looked at lots of questions regarding this and each suggestion is to use an intermediate string, which I am. Hopefully someone can pick up on something I'm missing :)
var my_table = $("#output_table").find("tbody");
// Loop over JSON data and create table rows
$.each(json.data, function(index, field) {
var html_string = "<tr><form action='addtoDB.php' method='POST'>" +
"<input type='hidden' name='instructor' value=" + field.instructor + ">" +
"<input type='hidden' name='section' value=" + field.section + ">" +
"<input type='hidden' name='course_id' value=" + field.course_id + ">" +
"<input type='hidden' name='course_name' value=" + field.course_name + ">" +
"<td class='row_head'>" + field.instructor + "</td>" +
"<td>" + field.section + "</td>" +
"<td>" + field.start_time + " - " + field.end_time + "</td>" +
"<td>" + field.weekdays + "</td>" +
"<td>" + field.total + "/" + field.capacity + "</td>";
if (field.open) {
html_string += "<td><input type='submit' value='open to enroll' class='disabled' disabled></td>";
} else {
html_string += "<td><input type='submit' value='Notify me' class='enabled'></td>";
}
html_string += "</form></tr>";
my_table.find('tr:last').after(html_string);
});
I've tried removing <form> and <tr> from the string entirely and adding it at the end with:
my_table.append("<tr><form>" + html_string + "</form></tr>"); but I get the same effect. So confused!
This is actualy not a jquery problem but a browser one. Browsers won't let you do that because the only elements allowed to be children of tr are th and td.
Source : w3c documentation
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/