JSFiddle - React, Tailwind, and code Playground

by Torwan

HTML

<div id="resultsTable">
    <table id='summaryOfResults' border='1'>
        <tbody id="body">
            <tr>
                <th>#</th>
                <th>n<sub>i</sub></th>
                <th>n<sub>f</sub></th>
                <th>E<sub>i</sub> (J)</th>
                <th>E<sub>f</sub> (J)</th>
                <th>&Delta;E (J)</th>
                <th>&Delta;E (kJ/mol)</th>
                <th>&lambda; (nm)</th>
            </tr>
        </tbody>
    </table>
</div>
<div id="tableButtons">
    <button id='copyButton' onclick=''>Copy Table</button>
    <button id='clear' onclick='clearTable();'>Clear Table</button>
    <button id='write' onclick='writeTable();'>Write Table</button>
</div>

CSS

.favourate_dextop
{
    background:url('http://im.gifbt.com/images/star1_phone.png') no-repeat;display:block;height:19px;width:18px}

.favourate_dextop:hover
{background:url('http://im.gifbt.com/images/star1_phonehover.png') no-repeat}

JavaScript

var array = [1,2,3,4,5,6,7,8,1,2,3,4,5,6,7,8];
var count = 0;
var totalCells = 8;

function writeTable() {
    // declare html variable (a string holder):
    var html = '';
    for (var i = 0; i < array.length / 8; i++) {
        // add opening <tr> tag to the string:
        html += '<tr>';
        for (var j = 0; j < totalCells; j++) {
            // add <td> elements to the string:
            html += '<td>' + array[count] + '</td>';
            count++;
        }
        // add closing </tr> tag to the string:
        html += '</tr>';
    }
    //append the whole created html string to the body:
    $('#body').append(html);
    // reset the count:
    count = 0;
}