Slider manipulation of table

Uses Html5 slider inputs to increase and decrease column sizes.

by secretgspot

HTML

<div id="output">
    <span id="diff">0</span>
<form name="y">
<label> y-axis: <input class="vertical" name="yaxis" type="range" value="30" id="yaxis" min="5" max="100" step="1" /> </label><br /><span id="yaxis_val">30</span> rows

<table id="domain">
<tr id = "0"><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr id="1"><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr id ="2"><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr id="3"><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr...

CSS

input[type="range"]#yaxis {
    -webkit-appearance: slider-vertical;
    width: 20px;
    height: 100px;
    float: left;
}

#yaxis_val {
 float:left;   
}

table#domain td {
 border-width: 1px;
 border-style: dotted;
width: 5px;
height: 5px;        
}

JavaScript

$(document).ready(function(){

    
    // add rows when y-axis slider changes...
    $('input#yaxis').change(function() {
        var newValue = $('input#yaxis').val(); // set by the input
        var y = $('table#domain tr').length; // current number of <tr> tags
        var x = $('table#domain tr:first td').length; // current number of <td> tags
        $('#yaxis_val').html(newValue);
        if (newValue != y-1) {
            appendRow(newValue, y, x);
        }
            
    });
    $('input#xaxis').change(function() {
        var newValue = $('input#xaxis').val();
        $('#xaxis_val').html(newValue); 
        var y = $('table#domain tr').length;
        var x = $('table#domain tr:first td').length;
        if (newValue != x) {
            appendCol(newValue, x, y);
        }
                 
    });

    function appendRow(newValue, y, x) {
        var diff = newValue - y;
        var cells = "", i;
        var row = "",q;
        
        for (i=0; i<x; i++) {
          cells=cells + "<td></td>";
          }
        if (diff < 0) {
            $('table#domain tr').filter(function(){
                return $(this).attr("id") > newValue-1;
                }).remove();
        }
                else {
                    for (q=0; q<diff; q++){
                        row = row+'<tr id="'+(q+y)+'">'+cells+'</tr>';
                    }
                    $('table#domain').append(row);
                }

            
    }    

    function appendCol(newValue, x, y) {
        var diff = newValue - x;
        var cells = "", i, q;         
        for (i=0; i<diff; i++) {
          cells=cells + "<td></td>";
          }
        $('#diff').html(newValue+' '+diff+' '+y+' '+x);
        if (diff < 0) {
            for (q=0; q>diff; q--) {            
                $("#domain tr td:last-child").remove();
            }
        }
                else {
                $("#domain tr").append(cells);
                }

            
    }        
    


 });