function-grid-starter/index.html at master · itscodenation/function-grid-starter · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html>
    <head>
        <script src="https://code.jquery.com/jquery-2.0.2.min.js"></script>
        <script>
            function setColor(row, col, color) {
            var cell = $("#t")[0].rows[row].cells[col];
            cell.style.backgroundColor = color;
             }
        </script>
        <link href="style.css" rel="stylesheet">
        <script defer src="script.js"></script>
        <title>JS-Function-Grid</title>
    </head>
    <body>
        <h2>Fun on a grid</h2>
      <div class="intro">You get a function:
      <div class="code">
      setColor(row, column, color);
      </div>
      For a given row and column (both numbered from 0), it colors the corresponding cell. for example. try
      <strong>setColor(2, 0, "purple");</strong>

    </div>


  <table id="t">
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
  </table>
    </body>
</html>