How do I add different classes to <td> in Javascript - javascript

Hey I have two td elements in a table.
I want the have separate style classes for them. How do I do this?
This is my code:
table += "<tr>";
for(var i = 0; i < data.list.length; i++){
table += "<td>" + "<table>" + "<td>" + value1 "</td>" + "<td>" + value2 + "</td>" + "</table>";
}
table += "</tr>";
I have tried to simply add class in td element but that does not work.
Any ideas? I use Javascript to create the table.
So this does not work:
table += "<tr>";
for(var i = 0; i < data.list.length; i++){
table += "<td>" + "<table>" + "<td class="one">" + value1 "</td>" + "<td class="two">" + value2 + "</td>" + "</table>";
}
table += "</tr>";

You should be using single quotes inside double-quoted strings, like this
table += "<tr>";
for(var i = 0; i < data.list.length; i++){
table += "<td>" + "<table>" + "<td class='one'>" + value1 "</td>" + "<td class='two'>" + value2 + "</td>" + "</table>";
}
table += "</tr>";

Related

Datatable not showing properly and losing information

I have the following javascript code. I try to get some information from an API and display them in a datatable. The problem is when i load the page, even if i have 10 elements per page selected I can see all 102 elements. Also when i change from 10 elements to 25 all my information is removed and I get the messege "No records to display".
buildlist()
function buildlist() {
var url = 'http://127.0.0.1:8000/api/angajat-list/'
fetch(url).then(
res => {
res.json().then(
data => {
console.log(data);
let temp = "";
data.forEach((itemData) => {
temp += "<tr>";
temp += "<td>" + itemData.idAngajat + "</td>";
temp += "<td>" + itemData.nume + "</td>";
temp += "<td>" + itemData.prenume + "</td>";
temp += "<td>" + itemData.functie + "</td>";
temp += "<td>" + itemData.domiciliuFeroviar + "</td>";
temp += "<td>" + itemData.oreLucrate + "</td>";
temp += "<td>" + itemData.disponibilitate + "</td>";
temp += "<td>" + itemData.programare + "</td>";
temp += "</tr>";
});
console.log(temp)
document.querySelector('tbody').innerHTML = temp;
}
)
}
)
}
$(document).ready(function () {
$('#datatable').dataTable();
});
This is the Javascript code.
<div class="card-body">
<table id="datatable">
<thead>
<tr>
<th>ID ANGAJAT</th>
<th>NUME</th>
<th>PRENUME</th>
<th>FUNCTIE</th>
<th>DOMICILIU FEROVIAR</th>
<th>ORE LUCRATE</th>
<th>DISPONIBILITATE</th>
<th>PROGRAMARE</th>
</tr>
</thead>
<tbody id="data">
</tbody>
</table>
</div>
This is the code from the Html file
Try this
function buildlist() {
var url = 'http://127.0.0.1:8000/api/angajat-list/'
fetch(url).then(
res => {
res.json().then(
data => {
console.log(data);
let temp = "";
data.forEach((itemData) => {
temp += "<tr>";
temp += "<td>" + itemData.idAngajat + "</td>";
temp += "<td>" + itemData.nume + "</td>";
temp += "<td>" + itemData.prenume + "</td>";
temp += "<td>" + itemData.functie + "</td>";
temp += "<td>" + itemData.domiciliuFeroviar + "</td>";
temp += "<td>" + itemData.oreLucrate + "</td>";
temp += "<td>" + itemData.disponibilitate + "</td>";
temp += "<td>" + itemData.programare + "</td>";
temp += "</tr>";
});
console.log(temp)
document.querySelector('tbody').innerHTML = temp;
$('#datatable').dataTable();
}
)
}
)
}
$(document).ready(function () {
buildlist();
});
Also, try using datatable's ajax functionality - https://datatables.net/examples/ajax/objects.html

How to get the specific item from array on click in javascript table created using javascript

My code is this
var html = "<table>";
for (var i = 0; i < data.length; i++) {
html += "<tr>";
html += "<td>" + data[i].personName + "</td>";
html += "<td>" + data[i].fatherName + "</td>";
html += "<td>" + data[i].personPhone + "</td>";
html += "<td>" + data[i].personCnic + "</td>";
html += "<td>" + data[i].deliveryDate + "</td>";
html += "<td>" + data[i].submissionDate + "</td>";
html += "<td>" + data[i].year + "</td>";
html += "<td>" + data[i].session + "</td>";
html += "<td>" + data[i].board + "</td>";
html += "<td>" + data[i].amount + "</td>";
html += "</tr>";
}
html += "</table>";
document.getElementById("box").innerHTML = html;
How can I use an event listeners using this approach?
I have seen many methods but none of that match my scenario.
You need to add an onClick which is different for every row, in there you pass as parameter the row index :) than you can handle it on the function.
var html = "<table>";
for (var i = 0; i < data.length; i++) {
html+="<tr onclick='myFunction("+i+")'>";
html+="<td>"+data[i].personName+"</td>";
html+="<td>"+data[i].fatherName+"</td>";
html+="<td>"+data[i].personPhone+"</td>";
html+="<td>"+data[i].personCnic+"</td>";
html+="<td>"+data[i].deliveryDate+"</td>";
html+="<td>"+data[i].submissionDate+"</td>";
html+="<td>"+data[i].year+"</td>";
html+="<td>"+data[i].session+"</td>";
html+="<td>"+data[i].board+"</td>";
html+="<td>"+data[i].amount+"</td>";
html+="</tr>";
}
html+="</table>";
function myFunction(x) {
console.log('index' + x + 'was clicked')
// do the handling here
}
HERE YOU HAVE YOUR DEMO
let data = [{ personName: "test1"}, {personName: "test2"}]
var html = "<table>";
for (var i = 0; i < data.length; i++) {
html+="<tr onclick='myFunction("+i+")'>";
html+="<td>"+data[i].personName+"</td>";
html+="</tr>";
}
html+="</table>";
document.getElementById("demo").innerHTML = html;
function myFunction(i) {
console.log('index ' + i + ' was clicked')
// do the handling here
console.log(data[i])
}
<p id="demo"></p>
You can add the event listeners after you adding their html into the DOM.
Like this:
document.getElementById("box").querySelectorAll('tr').forEach(tr => {
tr.addEventListener('click', function() {
console.log(tr.textContent);
});
});
And working demo: (I added some dumb data so the demo will work)
const data = new Array(5).fill(0).map((_, idx) => ({
personName: `personName-${idx}`,
fatherName: `fatherName-${idx}`,
personPhone: `personPhone-${idx}`,
personCnic: `personCnic-${idx}`,
deliveryDate: `deliveryDate-${idx}`,
submissionDate: `submissionDate-${idx}`,
year: `year-${idx}`,
session: `session-${idx}`,
board: `board-${idx}`,
amount: `amount-${idx}`
}));
var html = "<table>";
for (var i = 0; i < data.length; i++) {
html += "<tr>";
html += "<td>" + data[i].personName + "</td>";
html += "<td>" + data[i].fatherName + "</td>";
html += "<td>" + data[i].personPhone + "</td>";
html += "<td>" + data[i].personCnic + "</td>";
html += "<td>" + data[i].deliveryDate + "</td>";
html += "<td>" + data[i].submissionDate + "</td>";
html += "<td>" + data[i].year + "</td>";
html += "<td>" + data[i].session + "</td>";
html += "<td>" + data[i].board + "</td>";
html += "<td>" + data[i].amount + "</td>";
html += "</tr>";
}
html += "</table>";
const box = document.getElementById("box");
box.innerHTML = html;
box.querySelectorAll('tr').forEach(tr => {
const _tr = tr;
tr.addEventListener('click', () => {
console.log(_tr.textContent);
});
});
<div id="box"></div>

How to create and increment a number without the table length

I want to increment a number in the 1st column of each row of my table.
I want to make it without knowing the length of the data.
I tried this, and the number doesn't increment, but just display the variable value in each rows.
$(document).ready(function (e) {
if ($("#checker").val() == "ka") {
var data = $("#report_all").serialize();
$('#all_report thead').empty();
$('#all_report tbody').empty();
$.ajax({
data: data,
type: "Post",
url: "../php/report/report_all_KA.php",
success: function (data) {
var list = JSON.parse(data);
for (var x = 0; i < list.length; i++) {
var n = 1;
n = list.length++;
}
var th = "";
th += "<th>" + "<center>" + 'no' + "</center>" + "</th>";
th += "<th>" + "<center>" + 'Tanggal' + "</center>" + "</th>";
th += "<th>" + "<center>" + 'Type Kadar Air' + "</center>" + "</th>";
th += "<th>" + "<center>" + 'Kode Material' + "</center>" + "</th>";
th += "<th>" + "<center>" + 'Nama Material' + "</center>" + "</th>";
th += "<th>" + "<center>" + 'Storage Location' + "</center>" + "</th>";
th += "<th>" + "<center>" + 'Kadar Air' + "</center>" + "</th>";
th += "<th>" + "<center>" + 'Nama PPIC' + "</center>" + "</th>";
th += "</th>";
$("#all_report thead").append(th);
for (var i = 0; i < list.length; i++) {
var tr = "<tr>";
tr += "<td>" + n + "</td>";
tr += "<td>" + list[i]['date'] + "</td>";
tr += "<td>" + list[i]['type'] + "</td>";
tr += "<td>" + list[i]['kode'] + "</td>";
tr += "<td>" + list[i]['nama'] + "</td>";
tr += "<td>" + list[i]['sloc'] + "</td>";
tr += "<td>" + list[i]['ka'] + "</td>";
tr += "<td>" + list[i]['ppic'] + "</td>";
tr += "</tr>";
$("#all_report tbody").append(tr);
$("#all_report").show();
}
return false;
}
});
//[...]
The code that I made for the increment in the whole code above is like this.
for(var x = 0; i < list.length; i++){
var n=1;
n= list.length++;
}
If you are just looking for a column in your table that corresponds to the row numbers, you can replace "<td>" +n+"</td>" with "<td>"+(i+1)+"</td>".
Then you won't even need that other loop!
var table = document.getElementsByTagName('table')[0],
rows = table.getElementsByTagName('tr'),
text = 'textContent' in document ? 'textContent' : 'innerText';
for (var i = 0, len = rows.length; i < len; i++) {
rows[i].children[0][text] = i + rows[i].children[0][text];
}
Hope it works! :)

Use image in for each but with different onclicks

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.

How to make a table row highlight if the checkbox is checked (on button click)?

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/

Categories

Resources