Simple web template

Question

I'm a total noob when it comes to web programming. So please don't be too demanding :)

So I would like to create a page like one posted below

Two major funcionalities:

1) While the button on the right will be clicked all cells should turn green

2) Data in the cells would be exported from excel table, so I will only update the excel and the page will be refreshed.

*3) - only if possible - Saving the current status of row (highlighted or no), so after closing the page and reopening it highlighted previous cells will be highlighted.

I would appreciate any kind of help.

Thanks in advance :)

Possible duplicate of [How do you disable browser Autocomplete on web form field / input tag?](https://stackoverflow.com/questions/2530/how-do-you-disable-browser-autocomplete-on-web-form-field-input-tag) — cramopy, Jun 05 '18 at 07:18
1) is a couple of lines of CSS and/or JavaScript once you've got a grid in place. 2) Is a big step, and it's virtually impossible to read Excel files without a library. Those are really complicated, and it would take you probably weeks or months just to write the a simple Excel reader, even if it just focuses on your specific Excel file and doesn't support the millions of options that those files could theoretically contain. 3) Again fairly easy. You can use a cookie or local storage. Another handful of Javascript code. 1 line to save the state in on click, and 3 to read it back on page load. — GolezTrol, Jun 05 '18 at 07:23
@Karol does your data absolutely have to be linked with Excel? This is making it all needlesly complicated. — Samuel Hulla, Jun 05 '18 at 07:28
If you could save the data in a simpler format, parsing it yourself suddenly becomes in reach. Json is very easy to read from Javascript, but not easy to write from Excel. CSV (comma-separated values) is still easy to parse though, and can be saved directly from Excel, so you can do the maintenance on the data using Excel. — GolezTrol, Jun 05 '18 at 07:29
When you describe yourself noob, it should be quite challenging for you to solve it and will make a way for you to learn it. What have you tried so far ? — Vignesh Raja, Jun 05 '18 at 07:29
Well, it can be in other format, the point is that I would generate the table from excel and can save it to whatever it is required. — Karol, Jun 05 '18 at 07:48

score 0 · Answer 1 · answered Jun 05 '18 at 07:43

i think this code help you

$(function(){
    $('.table').on('click', 'tr', function(e){
            var $tr = $(this);
            var $table = $tr.closest('.table');
            var our_index = $($tr,$table).index();
            if (e.shiftKey) {
                var last_index = $table.data('last-index');
                if (last_index) {
                    if (last_index < our_index) {
                        while(last_index < our_index) {
                            $('tbody tr:eq('+(++last_index)+')', $table).click();
                        }   
                        $('tbody tr:eq('+(last_index)+')', $table).click();
                    } else {  
                        while(last_index > our_index) {
                            $('tbody tr:eq('+(--last_index)+')', $table).click();
                        }
                        $('tbody tr:eq('+(last_index)+')', $table).click();
                    } 
                }
                $table.data('last-index',our_index);
            } else {
                $table.data('last-index',our_index);
            }
            
            if ($tr.hasClass('success')) {
                $tr.removeClass('success');
            } else {
                $tr.addClass('success');
            }
    });
});

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>



<!------ Include the above in your HEAD tag ---------->

<div class="container">
 <div class="row">
  <h2>Table Row Selector with Shift Special Key</h2>
  
  
  <table class="table table-bordered table-condensed">
      <thead>
          <tr>
              <th>ID</th>
              <th>Name</th>
          </tr>
      </thead>
      <tbody>
          <tr><td>0</td><td>Example</td></tr>
          <tr><td>1</td><td>Example</td></tr>
          <tr><td>2</td><td>Example</td></tr>
          <tr><td>3</td><td>Example</td></tr>
          <tr><td>4</td><td>Example</td></tr>
          <tr><td>5</td><td>Example</td></tr>
          <tr><td>6</td><td>Example</td></tr>
          <tr><td>7</td><td>Example</td></tr>
          <tr><td>8</td><td>Example</td></tr>
          <tr><td>9</td><td>Example</td></tr>
          <tr><td>10</td><td>Example</td></tr>
          <tr><td>11</td><td>Example</td></tr>
          <tr><td>12</td><td>Example</td></tr>
          <tr><td>13</td><td>Example</td></tr>
          <tr><td>14</td><td>Example</td></tr>
          <tr><td>15</td><td>Example</td></tr>
          <tr><td>16</td><td>Example</td></tr>
          <tr><td>17</td><td>Example</td></tr>
          <tr><td>18</td><td>Example</td></tr>
          <tr><td>19</td><td>Example</td></tr>
      </tbody>
  </table>
  
  
 </div>
</div>

It helps a lot, but is there a way to store already highlighted cells? Whole html file would be stored in my local server, but it would be great to have the feature if I would highlight some cells then someone else who will open the page would see that they are highlighted — Karol, Jun 05 '18 at 08:44

Simple web template

1 Answers1