javascripthtmlhtml-tablecells

Javascript for filling in table html cells


I am trying to make a table that can make a +, x, H and in different colors and then on click it draws on the table. Could anyone help me out? I don't expect you to write the full code but if you could maybe provide some advice and/or example code I would totally appreciate it!

<!HTML>
<html>
<head>
<title>JScript</title>
<script language="javascript">

function Design()
{

}

</script>
</head>
<body>

<table border="1px" cellpadding="30px">
<tr><td name="h"></td><td></td><td></td><td></td><td name="h"></tr>
<tr><td></td><td></td><td name="h"></td><td></td><td></td></tr>
<tr><td></td><td></td><td name="h"></td><td></td><td></td></tr>
<tr><td></td><td></td><td name="h"></td><td></td><td></td></tr>
<tr><td name="h"></td><td></td><td></td><td></td><td name="h"></td></tr>
</table>

Pattern Choice: <br>
<input type="radio" name="sign" value="plus"> Plus Sign <br>
<input type="radio" name="sign" value="X"> Letter X <br>
<input type="radio" name="sign" value="H"> Letter H <br><br>

Color Choice: <br>
<select name="color" size="5">
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="yellow">Yellow</option>
<option value="green">Green</option>
<option value="orange">Orange</option>
</select>
</div>

<br><br>
<input type="button" value="Color It" onclick="Design()">
<input type="reset" value="Clear">

</body>
</html>

I don't know if you can see but I the <td name="h"> I thought that would be the way to go to fill in each cell at least for H and then I was going to use multiple names if they overlapped if that's even possible?


Solution

  • I did this using javascript

     <html>
    <head>
    
              function Design() {
                var desgn;
                if (document.getElementById('r1').checked) {
                    desgn = document.getElementById('r1').value;
                }
                if (document.getElementById('r2').checked) {
                    desgn = document.getElementById('r2').value;
                }
                if (document.getElementById('r3').checked) {
                    desgn = document.getElementById('r3').value;
                }
                console.log(desgn);
                var e = document.getElementById("list");
                var colr = e.options[e.selectedIndex].value;
    
                var tabs = document.getElementById("tbl");
                var rows = tabs.rows.length;
                var trs = tabs.getElementsByTagName("tr")[0];
                var tds = trs.cells
                var colms = tds.length
    
                var table = document.getElementById("tbl");
                for (var i = 0, row; row = table.rows[i]; i++) {
                    for (var j = 0, col; col = row.cells[j]; j++) {
                        if (desgn == 'X') {
                            var y = rows - i - 1;
                            if (i == j || j == y) {
                                trs = tabs.getElementsByTagName("tr")[i];
                                trs.cells[j].style.backgroundColor = colr;
                            }
    
                        }
                        else if (desgn == 'plus') {
                            if (i == 2 || j == 2) {
                                trs = tabs.getElementsByTagName("tr")[i];
                                trs.cells[j].style.backgroundColor = colr;
                            }
                        }
                        else if (desgn == "H") {
                            if (j == 1 || j == 3 || i == 2 && j == 2) {
                                trs = tabs.getElementsByTagName("tr")[i];
                                trs.cells[j].style.backgroundColor = colr;
                            }
                        }
                    }
                }
            }
    </script>
    
    </head>
    <body>
    
       <table border="1px" cellpadding="30px" id="tbl">
    <tr><td name="h"></td><td></td><td></td><td></td><td name="h"></tr>
    <tr><td></td><td></td><td name="h"></td><td></td><td></td></tr>
    <tr><td></td><td></td><td name="h"></td><td></td><td></td></tr>
    <tr><td></td><td></td><td name="h"></td><td></td><td></td></tr>
    <tr><td name="h"></td><td></td><td></td><td></td><td name="h"></td></tr>
    </table>
    
    Pattern Choice: <br>
    
    <input id='r1' type="radio" name="sign" value="plus"> Plus Sign <br>
    <input id='r2' type="radio" name="sign" value="X"> Letter X <br>
    <input id='r3' type="radio" name="sign" value="H"> Letter H <br><br>
    
    Color Choice: <br>
    <select id='list' name="color" size="5">
    <option value="red">Red</option>
    <option value="blue">Blue</option>
    <option value="yellow">Yellow</option>
    <option value="green">Green</option>
    <option value="orange">Orange</option>
    </select>
    </div>
    
    <br><br>
    <input type="button" value="Color It" onclick="Design()">
    <input type="reset" value="Clear" >
    
    
    </body>
    </html>