Inserting values to html table header using javascript/jquery/ajax

Question

Image snippet for refereence :The blue highlighted row is the header where i need to insert dates I have an html table.I want to display dates for a week in the header fields of the table starting from a specific date. Below is my table:

<table Id="timeTable" class="table table-bordered">
    <thead>
      <tr>
        <th>Projects</th>
        <th id="mon" style="width:100px"></th>
        <th id="tue" style="width:100px"></th>
        <th id="wed" style="width:100px"></th>
        <th id="thu" style="width:100px"></th>
        <th id="fri" style="width:100px"></th>
        <th id="sat" style="width:100px"></th>
        <th id="sun" style="width:100px"></th>
        <th id="totalhours" style="width:100px"></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Task1</td>
        <td contenteditable='true'></td>
        <td contenteditable='true'>2</td>
        <td contenteditable='true'></td>
        <td contenteditable='true'>3</td>
        <td contenteditable='true'>4</td>
        <td contenteditable='true'> </td>
        <td contenteditable='true'> </td>
        <td contenteditable='true'> </td>
      </tr>
      <tr>
        <td contenteditable='true'>Task2</td>
        <td contenteditable='true' >5</td>
        <td contenteditable='true' >2</td>
        <td contenteditable='true' >2.5</td>
        <td contenteditable='true' >3</td>
        <td contenteditable='true' >4</td>
        <td contenteditable='true' > </td>
        <td contenteditable='true' > </td>
        <td contenteditable='true' > </td>
      </tr>
      <tr>
        <td>Task3</td>
        <td>5</td>
        <td>2</td>
        <td>2.5</td>


        <td>3</td>
        <td>4</td>
        <td> </td>
        <td> </td>
        <td> </td>
      </tr>
    </tbody>
  </table>

I am in a learning phase on javascript/jquery/ajax.I was trying to do it using for loop but I am not sure how to access columns in the header and assign dates on an incremental order.

Also,I couldn't find any good references for learning this.Please guide me on to any blogs/documentations/pdfs which can provide a practical approach on javascript/jquery/ajax.I am using java as backend.Thanks in advance.

Answer 1

In javascript you can increment date by using this syntax:

data.setDate(date.getDate() + 1);

Here is a working example:

 $(document).ready( function () { // create new date instance to starts from var date = new Date('2017-01-02'); // iterate over th elements without the first one $('#timeTable th:not(:first-child)').each( function () { // stop iteration if we get into 'totalhours' th if( $(this).attr('id') === 'totalhours' ) return; // show date $(this).text(date.toDateString()); // increment date by 1 day date.setDate(date.getDate() + 1); }); }); 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table Id="timeTable" class="table table-bordered"> <thead> <tr> <th>Projects</th> <th id="mon" style="width:100px"></th> <th id="tue" style="width:100px"></th> <th id="wed" style="width:100px"></th> <th id="thu" style="width:100px"></th> <th id="fri" style="width:100px"></th> <th id="sat" style="width:100px"></th> <th id="sun" style="width:100px"></th> <th id="totalhours" style="width:100px"></th> </tr> </thead> <tbody> </tbody> </table> 

Answer 2

I think for starters you need some introduction to Javascript

https://www.w3schools.com/js/default.asp

This should suffice if you are absolute JS begginer. The type of manipulation you are trying to do here is achieved using Javascript DOM - Document Object Model

From MDN The Document Object Model (DOM) connects web pages to scripts or programming languages. Usually that means JavaScript, but modelling HTML, SVG, or XML documents as objects is not part of the JavaScript language. The DOM model represents a document with a logical tree. Each branch of the tree ends in a node, and each node contains objects. DOM methods allow programmatic access to the tree; with them you can change the document's structure, style or content. Nodes can have event handlers attached to them. Once an event is triggered, the event handlers get executed.

https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model

Bassicly it lets you dynamicly create new, rearange existing, or delete HTML elements that exist in your page, and more.

Your specific case here is quite unclear, assuming you want to display custom days of the week in the <thead> section rows and do some of your actions in the corresponding rows.

Vanilla JS

// Finds your element with id tag "timeTable"
var timetable      = document.getElementById('timeTable');

// You put your desired nammes for your th in an arraay like this
var thNames        = ['project', 'mon', 'tue', 'wen', 'thu', 'fri', 'sat', 'sun', 'total'];

// Length is an object property that counts how much entries you have in an array or object
var length         = thNames.length

// One of many reasons  why the world is using jQuery right here. 
// This is accesing your DOM tree, in this case a first tr element in thead 
var nodeTrElement  = timetable.children[0].children[0]

// For loop
for (var i = 0; i < length; i++) {

    // Creates an td element in DOM that doesn't yet exist 
    var th = document.createElement('th')

    //  This HTML text between tags bassicly ex. <p> Hello world </p>
    //  You should create full names array for days Monday, tuesday etc..
    var text = document.createTextNode(thNames[i])

    // "Attaching" that text to td element
    th.appendChild(text)

    // This sets your attribute from the array value
    th.setAttribute('id', thNames[i])

    // Sets style attribute on your HTML element. **NOTE** You should always use classes instead of this
    th.style.width = "100%"

    // Adds the td element to tr
    nodeTrElement.appendChild(th)

}

jQuery approach

 var thNames   = ['project', 'mon', 'tue', 'wen', 'thu', 'fri', 'sat', 'sun', 'total'];

var timetable = $('#timeTable thead tr:first-child')

$.each(thNames, function(index, thName) {
    timetable.append('<th id="' + thName + '" style="width:100%">' + thName + '</th>');
})

Do i need to say which one you should use ? :)

This is just a part of (if its even this) what you want. Judging from your post i say you are absolute begginer in programming and web in general, and i suggest you to start on https://developer.mozilla.org with some HTML and CSS and then advancing to Javascript. Happy learning :)