Click here to Skip to main content
15,745,750 members
Home / Discussions / JavaScript
   

JavaScript

 
AnswerRe: api connection culendar Pin
Richard MacCutchan14-Feb-23 22:05
mveRichard MacCutchan14-Feb-23 22:05 
AnswerRe: api connection culendar Pin
Dave Kreskowiak15-Feb-23 1:32
mveDave Kreskowiak15-Feb-23 1:32 
QuestionCopying from billing address to mailing address if they are the same not working correctly Pin
samflex11-Feb-23 12:15
samflex11-Feb-23 12:15 
AnswerRe: Copying from billing address to mailing address if they are the same not working correctly Pin
Richard Deeming12-Feb-23 22:02
mveRichard Deeming12-Feb-23 22:02 
GeneralRe: Copying from billing address to mailing address if they are the same not working correctly Pin
samflex13-Feb-23 5:14
samflex13-Feb-23 5:14 
QuestionAjax didn't work for cloning rows, But works for first row only Pin
amr aly3-Feb-23 8:35
amr aly3-Feb-23 8:35 
AnswerRe: Ajax didn't work for cloning rows, But works for first row only Pin
amr aly9-Feb-23 5:35
amr aly9-Feb-23 5:35 
QuestionI am using javascript to convert a large table to a pdf Pin
Zahira CHOUIBA26-Jan-23 3:22
Zahira CHOUIBA26-Jan-23 3:22 
Hi everyone,

I wrote this great script to help my team set up the weekly task distribution board, I wrote it using java script, html, and css, they've been doing it for a very long time in pencil on paper. but now i am in the final stage, i would like to convert my table to pdf, and this is where i found it difficult, i did several tests : like convert csv to pdf, it doesn't always give a good table, as it is under html. I would like to add a column at the end of the table for remarks but I think I will try with it later. now i'm just focus on pdf export. to be able to print our table every week and hang it, instead of pencil and a paper.

JavaScript
<pre>

<table id="timetable">

 <body>
 <tr>
      <td>

        <link href="table.css" rel="stylesheet">
        <script src="table.js"></script>
            
    </td>

<tr>

<button onclick="exportCSV()">Export CSV</button>

<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.1.0/papaparse.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.min.js"></script>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.min.js"></script>
<button onclick="exportPDF()">Export PDF</button>


<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.77/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.77/vfs_fonts.js"></script>

    
 </body>
 
 const timetable = document.getElementById("timetable");

const days = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];
const hours = ["7H", "13H", "20H"];

// Create table headers for days
const daysHeaderRow = document.createElement("tr");
const daysHeaderCell = document.createElement("th");
daysHeaderCell.innerHTML = "Days";
daysHeaderRow.appendChild(daysHeaderCell);
days.forEach(day => {
  const dayHeaderCell = document.createElement("th");
  dayHeaderCell.innerHTML = day;
  dayHeaderCell.colSpan = 3;
  daysHeaderRow.appendChild(dayHeaderCell);
});
timetable.appendChild(daysHeaderRow);

// Create table headers for hours
const hoursHeaderRow = document.createElement("tr");
const hoursHeaderCell = document.createElement("th");
hoursHeaderCell.innerHTML = "Hours";
hoursHeaderRow.appendChild(hoursHeaderCell);
for (let i = 0; i < days.length; i++) {
  for (let j = 0; j < 3; j++) {
    const hourHeaderCell = document.createElement("th");
    hourHeaderCell.innerHTML = hours[j];
    hoursHeaderRow.appendChild(hourHeaderCell);
  }
}
timetable.appendChild(hoursHeaderRow);

// Create row for Mina
const names = ["Khalfi","Redouani", "Daki", "Hamma", "Saadane", "Boughanem", "El Ansari","Badilou","Raoui", "Chouiba", "Dahmane", "Achdad", "Bouryal", "Ettouri", "Saadouni"];
for (let name of names) {
  const row = document.createElement("tr");
  const nameCell = document.createElement("td");
  nameCell.innerHTML = name;
  row.appendChild(nameCell);
  for (let i = 0; i < days.length; i++) {
    for (let j = 0; j < 3; j++) {
      const cell = document.createElement("td");
      const select = document.createElement("select");
      select.classList.add("cell");
      const options = [" ", "CP", "ME", "CL", "CE", "R"];
      options.forEach(option => {
        const optionElement = document.createElement("option");
        optionElement.value = option;
        optionElement.innerHTML = option;
        select.appendChild(optionElement);
      });
      cell.appendChild(select);
      row.appendChild(cell);
    }
  }
  timetable.appendChild(row);
}




function exportCSV() {
    var rows = document.querySelectorAll("#timetable tr");
    var csvData = [];
    for (var i = 0; i < rows.length; i++) {
        var rowData = [];
        var cells = rows[i].querySelectorAll("td, th");
        for (var j = 0; j < cells.length; j++) {
            const select = cells[j].querySelector("select");
            if(select){
                rowData.push(select.value);
            }else{
                rowData.push(cells[j].innerText);
            }
        }
        csvData.push(rowData);
    }
    var csv = Papa.unparse(csvData);
    var csvData = new Blob([csv], {type: 'text/csv;charset=utf-8;'});
    var csvURL =  null;
    if (navigator.msSaveBlob) {
        csvURL = navigator.msSaveBlob(csvData, 'timetable.csv');
    } else {
        csvURL = window.URL.createObjectURL(csvData);
    }
    var tempLink = document.createElement('a');
    tempLink.href = csvURL;
    tempLink.setAttribute('download', 'timetable.csv');
    tempLink.click();

    // Convert the CSV data to a PDF and download it
    
var pdf = new jsPDF('l','mm','a4');
pdf.addPage();
pdf.text(csv, 10, 10);
pdf.save('timetable.pdf');


#timetable th {
border: 1px solid #ddd;
padding: 8px;
text-align: center;
background-color: #006699; /* bleu foncé /
}
#timetable tr:nth-child(even) {
background-color: #E6E6FA; / lavande */
}

/* Mise en page globale */
body {
  background-color: #f1f1f1;
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

/* Style de la barre de navigation */
nav {
  background-color: #333;
  color: #fff;
  display: flex;
  justify-content: space-between;
  padding: 10px 20px;
}
nav a {
  color: #fff;
  text-decoration: none;
  margin-right: 10px;
}

/* Style de la section principale */
main {
  padding: 20px;
}

/* Style des titres */
h1, h2, h3 {
  color: #333;
  text-align: center;
  margin-bottom: 20px;
}

/* Style des paragraphes */
p {
  line-height: 1.5;
  margin-bottom: 20px;
}

/* Style des images */
img {
  max-width: 100%;
}

QuestionRe: I am using javascript to convert a large table to a pdf Pin
Jeremy Falcon26-Jan-23 8:02
professionalJeremy Falcon26-Jan-23 8:02 
AnswerRe: I am using javascript to convert a large table to a pdf Pin
RickyJudith8-Feb-23 0:24
RickyJudith8-Feb-23 0:24 
QuestionI have problem importing images of Json File on HTML Table Pin
Member 1590151922-Jan-23 2:14
Member 1590151922-Jan-23 2:14 
AnswerRe: I have problem importing images of Json File on HTML Table Pin
Jeremy Falcon24-Jan-23 4:30
professionalJeremy Falcon24-Jan-23 4:30 
Questionsoftware access control Pin
Member 1589900419-Jan-23 0:51
Member 1589900419-Jan-23 0:51 
AnswerRe: software access control Pin
Richard Deeming19-Jan-23 1:25
mveRichard Deeming19-Jan-23 1:25 
QuestionUse async function to retrieve data while looping through from another function to insert objects Pin
Member 1589206711-Jan-23 23:35
Member 1589206711-Jan-23 23:35 
AnswerRe: Use async function to retrieve data while looping through from another function to insert objects Pin
Richard Deeming12-Jan-23 0:02
mveRichard Deeming12-Jan-23 0:02 
QuestionRe: Use async function to retrieve data while looping through from another function to insert objects Pin
Member 1589206712-Jan-23 1:38
Member 1589206712-Jan-23 1:38 
AnswerRe: Use async function to retrieve data while looping through from another function to insert objects Pin
Richard Deeming12-Jan-23 2:31
mveRichard Deeming12-Jan-23 2:31 
PraiseRe: Use async function to retrieve data while looping through from another function to insert objects Pin
Member 1589206712-Jan-23 3:17
Member 1589206712-Jan-23 3:17 
GeneralRe: Use async function to retrieve data while looping through from another function to insert objects Pin
Richard Deeming12-Jan-23 3:39
mveRichard Deeming12-Jan-23 3:39 
AnswerRe: Use async function to retrieve data while looping through from another function to insert objects Pin
Jeremy Falcon12-Jan-23 8:44
professionalJeremy Falcon12-Jan-23 8:44 
AnswerRe: Use async function to retrieve data while looping through from another function to insert objects Pin
Leon Scott Kennedy13-Jan-23 5:25
Leon Scott Kennedy13-Jan-23 5:25 
QuestionJava Script Pin
Prerna Kharbanda3-Jan-23 20:56
professionalPrerna Kharbanda3-Jan-23 20:56 
AnswerRe: Java Script Pin
Richard MacCutchan3-Jan-23 21:33
mveRichard MacCutchan3-Jan-23 21:33 
Questioncalendar validation Pin
Jithin P 202227-Dec-22 20:45
Jithin P 202227-Dec-22 20:45 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.