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 want to create a button that produces a 3x3 HTML table meant for a card game, where each cell corresponds to one single image. For the time being, I'm mainly focusing on filling individual cells with a card number taken from an array element, using a step-by-step rationale. This is what the final result should look like in HTML, derived from the produced script;
<table style="width:100%">
<tr>
<td><img src="1.png"></td>
<td><img src="2.png"></td>
<td><img src="3.png"></td>
</tr>
<tr>
<td><img src="4.png"></td>
<td><img src="5.png"></td>
<td><img src="6.png"></td>
</tr>
<tr>
<td><img src="7.png"></td>
<td><img src="8.png"></td>
<td><img src="9.png"></td>
</tr>
</table>
This is what I'm currently working at, although with not much success
<!DOCTYPE html>
<html>
<body>
<table id="1">
</table>
<button onclick="createTable()">Create</button>
<script>
function createTable() {
var deck = [1,2,3,4,5,6,7,8,9];
function shuffle(o) { //v1.0
for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
return o;
}
shuffle(deck);
document.getElementById("1").innerHTML = "<tr><td>" + deck[0] + "</td><td>" + deck[1] + "</td><td>" + deck[2] + "</td></tr>" +
"<tr><td>" + deck[3] + "</td><td>" + deck[4] + "</td><td>" + deck[5] + "</td></tr>" +
"<tr><td>" + deck[6] + "</td><td>" + deck[7] + "</td><td>" + deck[8] + "</td></tr>" +
;
}
</script>
</body>
</html>
Note
The 9-card deck is shuffled using a pretty basic and self-explanatory function.
Edit. My final version, which is returning broken image.
<!DOCTYPE html>
<html>
<body>
<table id="1">
</table>
<button onclick="createTable()">Create</button>
<script>
function createTable() {
var deck = [1,2,3,4,5,6,7,8,9];
function shuffle(o) {
for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
return o;
}
shuffle(deck);
document.getElementById("1").innerHTML = "<tr><td><img src=" + deck[0] + ".png'></td><td>" + deck[1] + "</td><td>" + deck[2] + "</td></tr>" +
"<tr><td>" + deck[3] + "</td><td>" + deck[4] + "</td><td>" + deck[5] + "</td></tr>" +
"<tr><td>" + deck[6] + "</td><td>" + deck[7] + "</td><td>" + deck[8] + "</td></tr>"
;
}
</script>
</body>
</html>
After you fix your code by removing the extra + at the last line where you build your html (tr's and td's), you will simply need just to replace
"<td>" + deck[0] + "</td>"
by
"<td><img src='" + deck[0] + ".png'></td>"
... and so on for other indexes like deck[1], deck[2] etc.
You have got an extra "+"
document.getElementById("1").innerHTML = "<tr><td>" + deck[0] + "</td><td>" + deck[1] + "</td><td>" + deck[2] + "</td></tr>" +
"<tr><td>" + deck[3] + "</td><td>" + deck[4] + "</td><td>" + deck[5] + "</td></tr>" +
"<tr><td>" + deck[6] + "</td><td>" + deck[7] + "</td><td>" + deck[8] + "</td></tr>";
Should work better.
Your shuffle() is pretty convoluted. Let me advise you to write less exotic code. Making your code more readable will help to find potential errors. Indeed, the problem is not so hard to locate actually: https://stackoverflow.com/a/34471591/1636522 :-)
var deck = [1, 2, 3, 4, 5, 6, 7, 8, 9];
document.write(JSON.stringify(shuffle(deck), 0, 1));
function shuffle (anArray) {
var i, j, x, l = anArray.length;
for (i = 0; i < l; i++) {
j = rdmInt(l);
x = anArray[i];
anArray[i] = anArray[j];
anArray[j] = x;
}
return anArray;
}
function rdmInt (max) {
return Math.floor(Math.random() * max);
}
The same remark applies to your string concatenation:
document.getElementById("1").innerHTML = ""
+ "<tr>"
+ "<td><img src=" + deck[0] + ".png'></td>"
+ "<td>" + deck[1] + "</td>"
+ "<td>" + deck[2] + "</td>"
+ "</tr>"
+ "<tr>"
+ "<td>" + deck[3] + "</td>"
+ "<td>" + deck[4] + "</td>"
+ "<td>" + deck[5] + "</td>"
+ "</tr>"
+ "<tr>"
+ "<td>" + deck[6] + "</td>"
+ "<td>" + deck[7] + "</td>"
+ "<td>" + deck[8] + "</td>"
+ "</tr>";
Can you see the error now (line 3)? Here is a fix:
+ "<td><img src=\"" + deck[0] + ".png\"></td>"
You could go even further to avoid repetitions (dry):
var deck = [
"KNhxd", "7CtbR", "Os8qX",
"21SKd", "CWMZC", "43C1X",
"lpGvK", "8Wk7W", "Y3JFi"
];
// preserve the global namespace with an IIFE
document.body.innerHTML = function () {
var ROOT = "http://i.stack.imgur.com/";
function toTable (deck) {
var i, html = "";
for (i = 0; i < 3; i++) {
html += toTr(deck.slice(i * 3, (i + 1) * 3));
}
return "<table>" + html + "</table>";
}
function toTr (row) {
return "<tr>" + row.map(toTd).join('') + "</tr>";
}
function toTd (cell) {
return "<td><img src=\"" + ROOT + cell + ".png\" /></td>";
}
return toTable(deck);
}();
body{background:#006600;}
img{display:block;width:35px;}
If you want to create HTML elements, then you do not just write them as a text string and insert into an existing HTML element.
You create an element node (and text node if applicable) and append that to your existing HTML element.
Here is an article on w3 schools about creatung HTML tags with JavaScript.
http://www.w3schools.com/jsref/met_document_createelement.asp
If your table is always 9 cells then why not just write the HTML out giving each cell a unique id. Then u could use code similar to what u have.
document.getElementById("cell_1").innerHTML = deck[0];
You would need to include this logic for all 9 cells / values, although you could loop through them like;
for (i = 0; i < 8; i++) {
var cellNo = i + 1;
document.getElementById("cell_" + cellNo).innerHTML = deck[i];
}
Hope this helps ;)
In addition to the unnecessary '+' at the end of your innerHTML addition,
I would suggest making your code more flexible. Instead of adding the data hardcoded to your innerHTML you can do something like this:
var endOfRowCounter = 0;
var toAppend = "";
deck.forEach(function(card){
if(endOfRowCounter % 3 == 0) {
toAppend += "<tr>";
}
toAppend += "<td><img src=\"" + card + ".png\"></td>";
if(endOfRowCounter % 3 == 2)
{
toAppend += "</tr>";
}
endOfRowCounter++;
});
When I load your code I get this message in the browser console:
Uncaught SyntaxError: Unexpected token ;
It might help if you update this code:
document.getElementById("1").innerHTML = "<tr><td>" + deck[0] + "</td><td>" + deck[1] + "</td><td>" + deck[2] + "</td></tr>" +
"<tr><td>" + deck[3] + "</td><td>" + deck[4] + "</td><td>" + deck[5] + "</td></tr>" +
"<tr><td>" + deck[6] + "</td><td>" + deck[7] + "</td><td>" + deck[8] + "</td></tr>" +
;
To this:
document.getElementById("1").innerHTML = "<tr><td>" + deck[0] + "</td><td>" + deck[1] + "</td><td>" + deck[2] + "</td></tr>" +
"<tr><td>" + deck[3] + "</td><td>" + deck[4] + "</td><td>" + deck[5] + "</td></tr>" +
"<tr><td>" + deck[6] + "</td><td>" + deck[7] + "</td><td>" + deck[8] + "</td></tr>";
To loop your array and create your table structure with the images, you could do this for example:
function createTable() {
var deck = [1,2,3,4,5,6,7,8,9];
function shuffle(o) { //v1.0
for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
return o;
}
shuffle(deck);
var html = '';
for (var i = 0; i < deck.length; i++) {
if (i%3 === 0) {
html += "<tr>";
}
html += '<td><img src="' + deck[i] + '.png"></td>';
if (i%3 === 2) {
html += "</tr>";
}
}
document.getElementById("1").innerHTML = html;
}
I am building an application that would allow adding tasks to the list and changing the colour of them according to what selections were made.
I am using it to build a list of items, now how could I achieve something like this http://s4.postimg.org/npplicbnh/2222.png
Here is my .append code that #Narawa Games helped me with. However at the moment whenever a new item is added it changes the color of every other item that was added before it into the same color. I want to be able to have different items in different colors.
if ( valid ) {
$( "#tasks2 tbody" ).append("\<div class='taskList'><ul class='taskScreen2'><tr>"
+ "<td><h1>"
+ type.val()
+ "</h1></td>"
+"<td class='title'><h3>"
+ title.val()
+ " </td>"
+"<td>"
+ wordcount.val()
+ "</h3></td>"
+"<td><p>"
+ description.val()
+ "</p></td>"
+ "<td>"
+ deadline.val()
+ "</td>"
+ "</tr></ul></div>"
+"<script>var typeSUP=$('#type').val();var taskS=$('.taskList');if(typeSUP=='Dissertation'){taskS.css('border-color', 'red');}else if (typeSUP=='Report'){taskS.css('border-color', 'blue');}\
");
Here's a jsfiddle example - https://jsfiddle.net/ynwLykpk/
All help is welcome. Cheers
Assuming you want to style the table row that was just added, and leave others untouched, then try :
if ( valid ) {
var $task = $("<tr class='taskList'>"
+ "<td><h1>" + type.val() + "</h1></td>"
+ "<td class='title'><h3>" + title.val() + "</h3></td>"
+ "<td>" + wordcount.val() + "</td>"
+ "<td><p>" + description.val() + "</p></td>"
+ "<td>" + deadline.val() + "</td>"
+ "</tr>"
).appendTo("#tasks2 tbody");
switch($('#type').val()) {
case 'Dissertation':
$task.css('border-color', 'red');
break;
case 'Report':
$task.css('border-color', 'blue');
break;
default:
$task.css('border-color', 'green');
}
}
Tidied up because appending <div><ul><tr>...</tr></ul></div> to a tbody element is a nonsense.
Edit in response to #Tushars comments
Alternatively, write CSS directives for default and each task type :
.taskList {
border-color: green;
}
.taskList.Dissertation {
border-color: red;
}
.taskList.Report {
border-color: blue;
}
Then style rows by applying the appropriate class to the row :
if ( valid ) {
var type = type.val();
$("<tr class='taskList'>"
+ "<td><h1>" + type.val() + "</h1></td>"
+ "<td class='title'><h3>" + title.val() + "</h3></td>"
+ "<td>" + wordcount.val() + "</td>"
+ "<td><p>" + description.val() + "</p></td>"
+ "<td>" + deadline.val() + "</td>"
+ "</tr>"
).addClass(type).appendTo("#tasks2 tbody");
}
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/
This is a part of my code used to add new row to a table. I have problem with compiling the code related to last two TD elements. There is always an error of string literal. Please help me to figure it out.
$( "#content tbody" ).append( "<tr>" +
"<td>" + opr.val() + "</td>" +
"<td>" + flightNum.val() + "</td>" +
"<td>" + from_f.val() + "</td>" +
"<td id=" + flightNum.val() + " class='edit_but'>
<div>
<img src='images/edit.png' alt='Edit' />
</div>
</td>" +
"<td id=" + flightNum.val() + " class='deact_but' onclick="deactivateRow('+flightNum.val()+')">
<div>
<img src='images/delete.png' alt='Deactivate' />
</div>
</td>" + "</tr>" );
$( "#content tbody" ).append( "<tr><td>" + opr.val() + "</td><td>" + flightNum.val() + "</td><td>" + from_f.val() + "</td><td id=" + flightNum.val() + " class='edit_but'><div><img src='images/edit.png' alt='Edit' /></div></td><td id=" + flightNum.val() + " class='deact_but' onclick='deactivateRow(" + flightNum.val() + ")'><div><img src='images/delete.png' alt='Deactivate' /></div></td></tr>" );
Your code is a mess! there are so many quotes (") missing and string concating (+) missing!
After a lot of fixing:
$( "#content tbody" ).append( "<tr>" +
"<td>" + opr.val() + "</td>" +
"<td>" + flightNum.val() + "</td>" +
"<td>" + from_f.val() + "</td>" +
"<td id=" + flightNum.val() + " class='edit_but'>" +
"<div>" +
"<img src='images/edit.png' alt='Edit' />" +
"</div>" +
"</td>" +
"<td id=" + flightNum.val() + " class='deact_but' onclick='deactivateRow('" +flightNum.val()+")'>" +
"<div>" +
"<img src='images/delete.png' alt='Deactivate' />" +
"</div>" +
"</td></tr>" );