I try to get data from table, there is a link "Kaydet" when I click it, I must get a data from table which belong to it row, I share my table, it is like below:
https://hizliresim.com/PB3Dmv
sozlesme.js
Template.sozlesmeListele.events({
'click .kaydet': function (event, template) {
event.preventDefault();
var sozlesmeBilgileriAl = $(event.currentTarget).parent().parent().find(".secilenArac");
saveSozlesmeBilgisi = sozlesmeBilgileriAl.val();
alert(saveSozlesmeBilgisi);
}
});
sozlesmeAl.html
<tbody>
{{#each sozlesmeList}}
<tr>
<td>{{kullaniciadi}}</td>
<td>{{rezervasyonnumarasi}}</td>
<td>{{KiradaKalicakGun}}</td>
<td>{{telefon}}</td>
<td>{{alistarihi}}</td>
<td>{{iadetarihi}}</td>
<td class="secilenArac">{{secilenarac}}</td>
<td>{{aracteslimadresi}}</td>
<td>{{odenecekTutar}} TL.</td>
<td>Ceyhun TEKİN</td>
<td> Kaydet</td>
</tr>
{{/each}}
</tbody>
How can I solve it?
Deciphering Turkish Javascript is a new challenge for me but if I'm reading your question correctly, you want to figure out which row was clicked and get the data from that row, correct?
The simplest solution is to break up your template into an outer list-level one and an inner, row-level one. Then you can react to click events on the row and get your data context automatically. No need to try to figure out which row was clicked on.
Template.tekSozlesme.events({
'click .kaydet': function (event, template) {
event.preventDefault();
console.log(this); <!-- *this* will be the row data context
... do something with it
}
});
<template name="sozlesmeListele">
<tbody>
{{#each sozlesmeList}}
{{> tekSozlesme }}
{{/each}}
</tbody>
</template>
<template name="tekSozlesme">
<tr>
<td>{{kullaniciadi}}</td>
<td>{{rezervasyonnumarasi}}</td>
<td>{{KiradaKalicakGun}}</td>
<td>{{telefon}}</td>
<td>{{alistarihi}}</td>
<td>{{iadetarihi}}</td>
<td class="secilenArac">{{secilenarac}}</td>
<td>{{aracteslimadresi}}</td>
<td>{{odenecekTutar}} TL.</td>
<td>Ceyhun TEKİN</td>
<td>Kaydet</td>
</tr>
</template>
Related
I have fetched data from nodejs and want to show that object of data in react js (Table form).
Data fetched from backend
I want to display this data in table format.
<table className="table">
<thead>
<tr>
<th scope="col">Row Number</th>
<th scope="col">Order Number</th>
<th scope="col">Error Description</th>
</tr>
</thead>
<tbody>
{/* <tr >
{errorresult.map((item, index) => (
<div key={index}>
{Object.keys(item[index]).map((subarr, i) => (
<td key={i}>{item[subarr]}</td>
))}
</div>
))} </tr> */}
<tr>
{Object.keys(errorresult).map((item, i) => (
<td key={i}>{errorresult[item]}</td>
))}</tr>
</tbody>
</table>
Guys, please help, I have used the map function to display data but am not able to show data in different rows. In my code, all data show in one row.
Inside the loop you are using only td , that means it will insert the data only in columns of a single row. If you want to fix the issue the row tr also be inside loop.
I am trying to create a table of unique barcodes using node, bootstrap, and ejs. Here are the contents of my .ejs file:
<head>
<script src="https://cdn.jsdelivr.net/npm/jsbarcode#3.11.4/dist/JsBarcode.all.min.js"</script>
</head>
<body>
<table>
<thead>
<tr>
<th scope="col">Employee</th>
</tr>
</thead>
<tbody>
<% employeeObj.forEach(function(obj) { %>
<tr>
<td><%= obj.id %><svg id="barcode"></svg><script>var employee = '<%= obj.id %>'; JsBarcode("#barcode", employee);</script></td>
</tr>
<% }); %>
</tbody>
</table>
</body>
</html>
For some reason in each row of the table the barcode is being generated, but every barcode is the exact same value. I tried just putting the string value of obj.id in each row and it displays the different values fine.
What am I doing wrong?
I realized my issue was that the id for every barcode was the same which resulted in the same barcode being display multiple times. The solution to this problem is to have a unique id which could be accomplished like this:
id="<%=obj.id%>"
I am following a node.js tutorial but instead of using mongodb I am trying out sqlite. I have everything working. I am able to store data into the sqlite database but now I need to display it in an HTML table. Here's my code for retrieving data from a table called News
index: (req,res) => {
let sql = 'SELECT *'
sql += 'FROM News'
db.all(sql, [], (error, rows) => {
if (error){
console.log(error);
}
res.send(rows);
//res.redirect('admin/index');
});
},
Now I am able to send this row to the browser using
res.send(rows)
Here is my html code,
<div class="container-fluid">
<div class="alert alert-secondary text-center">
<h1>ALL POSTS</h1>
</div>
<table class="table table-bordered">
<thead class="bg-dark text-center">
<tr class="text-white">
<th>ID</th>
<th>Title</th>
<th>Content</th>
</tr>
</thead>
<tbody class="text-center">
{{#each this}}
<tr>
<td>{{id}}</td>
<td>{{title}}</td>
<td>{{content}}</td>
</tr>
{{/each}}
</tbody>
</table>
</div>
I tried to use res.render after res.send to render the tables but it throw error
Cannot set headers after they are sent to client.
How do I do this solve this? I can see the data in my browser now I want to render it in my table.
Hi guys I figured it out. You have to render the page and send data in the same res.render(). So this is what you have to do,
//just remove the
res.send(rows);
//and replace it with
res.render('admin/index', {news:rows});
and replace with in your html/handlebars
{{#each news}}
I am trying to download table HTML using table2excel plugin.
I can download all column in table with this code:
<table id="empTable">
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
<th>Address</th>
</tr>
<tr>
<td>01</td>
<td>Alpha</td>
<td>37</td>
<td>Bandung</td>
</tr>
<tr>
<td>02</td>
<td>Bravo</td>
<td>29</td>
<td>Bali</td>
</tr>
</table>
<script>
$(document).ready(function () {
$("#empTable").table2excel({
filename: "Employees.xls"
});
});
</script>
I am success to download table with all column (ID, Name, Age, Address). How to download as excel partial of column table? I only want to download column ID, Name, and Age without column Address. How should I do?
table2excel has an option to exclude cells that contain a specified class. In the example below, I add the noExport class to the cells I don't want to export. They are ignored when the file is created.
$(document).ready(function() {
$('#export').on('click', function(e){
$("#table").table2excel({
exclude: ".noExport",
name: "Data",
filename: "Workbook",
});
});
});
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="//cdn.rawgit.com/rainabba/jquery-table2excel/1.1.0/dist/jquery.table2excel.min.js"></script>
<button id="export">Export</button>
<table id="table">
<thead>
<tr>
<td class="noExport">This cell won't be exported.</td>
<td>This cell will get exported.</td>
</tr>
</thead>
<tbody>
<tr>
<td>Lorem</td>
<td class="noExport">Ipsum</td>
</tr>
<tr>
<td>Foo</td>
<td>Bar</td>
</tr>
</tbody>
</table>
Admittedly, this could get tedious to do for an entire column. Fortunately, a GitHub user forked table2excel and made a modification that allows you to specify which columns you want to export.
See: https://github.com/davidkonrad/table2excel
Using his version of table2excel, it'd look something like this:
$(document).ready(function() {
$('#export').on('click', function(e){
$("#table").table2excel({
exclude: ".noExport",
name: "Data",
filename: "Workbook",
columns: [0, 1, 2] // export first three columns
});
});
});
Note that there does appear to be a bug with opening table2excel workbooks in some versions of Excel. You might get a warning saying the file extension doesn't match. But if you ignore this warning, it should load in Excel without further issue.
Why for loop is not working , but on individual data it works.
I'm trying to fetch 3 inputs from the api, book name , author name and subject.
<table class="table table-bordered">
<h1 align="center">List of Science Book Records</h1>
<thead>
<tr>
<th>Book Name</th>
<th>Author Name</th>
<th>Publish Date</th>
</tr>
</thead>
<tbody class="mypanel">
<script>
$.getJSON('https://openlibrary.org/subjects/science.json', function(data) {
for (var i=0;i<data.length;i++) {
console.log("hii");
var text = `<tr><td>${data.works[i].title}</td>
<td>${data.works[i].authors[i].name}</td>
<td>${data.name}</td></tr>`
$(".mypanel").html(text);
}
});
</script>
</tbody>
</table>
You should looping data.works instead. Check the following snippet.
I'm assuming that data.works[i].autors has only one position, if not, you can loop them as well.
Finally prepend to the div with class myPanel.
Hope it helps.
$.getJSON('https://openlibrary.org/subjects/science.json', function(data) {
for (var i=0;i<data.works.length;i++) {
var text = `<tr><td>${data.works[i].title}</td>
<td>${data.works[i].authors[0].name}</td>
<td>${data.name}</td></tr>`
$(".mypanel").append(text);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered">
<h1 align="center">List of Science Book Records</h1>
<thead>
<tr>
<th>Book Name</th>
<th>Author Name</th>
<th>Genre</th>
</tr>
</thead>
<tbody class="mypanel">
Judging from JSON structure that you have, you're iterating over the length of an object data which is undefined.
In order to show the list of works you need to iterate over the length of works so your loop will look like this
for (var i = 0; i < data.works.length; i++) {
// do stuff with data.works[i]
}
And also you can use append in each iteration of the loop OR you can summarize all text, and then append it after the loop, by doing
text += `<tr><td>${data.works[i].title}</td>
<td>${data.works[i].authors[i].name}</td>
<td>${data.name}</td></tr>`;
But don't forget to define variable text before the loop.