ビックリマンチョコ　収集記録

ビックリマンチョコの収集記録を作れる表です。知識が浅いので、かなり難しかったです・・・（泣）なかなか思い通りに動いてくれない物ですね・・・
今後、編集する事があるかもしれません（丁度今一段落したところだったのでアップしました）。
また、実のところ、テーブルを逐次日付順にソートしたいのですが（クリックしてソート等ではない）、やり方がさっぱりで・・・詳しい方いらっしゃいましたら、教えて頂けると幸いです。

JavaScript?

```js:
window.onLoad = $(function() {
$( "#datepicker" ).datepicker();
});

var count = 0;
var date, name, get, importance, comment;

function changeColor() {
    var rowElm = document.getElementsByTagName("tr")[count + 1];
    if (importance.innerHTML == "激レア") {                         
       rowElm.style.backgroundColor="salmon";
    } else if (importance.innerHTML == "超レア") {                  
        rowElm.style.backgroundColor = "aqua"; 
    } else if (importance.innerHTML == "レア") {                    
        rowElm.style.backgroundColor = "lightgreen";
    }
}

function tableControl() {                                       
    var table1 = document.getElementById("myTable");
    var row = table1.insertRow(count + 1);
    
    var entry = new Array(5);
    for(var r = 0; r < 5; r++) {
        entry[r] = row.insertCell(r);
    }
    
    entry[0].setAttribute("name","date");
    entry[1].setAttribute("name","name");
    entry[2].setAttribute("name","get");
    entry[3].setAttribute("name","importance");
    entry[4].setAttribute("name","comment");
    
    
    var getDate = document.fm.datepicker.value;
    
    var getColumn;                                        
    var getColumnMenu = document.fm.menu;                                      
    for(var r = 0 ; r < getColumnMenu.options.length ; r++){        
        if(getColumnMenu.options[r].selected){                      
           getColumn = getColumnMenu.options[r];                      
        }
    }
    
    var getShop = document.getElementsByName("shop");  
    var getShopName;                                     
    for(var r = 0; r < getShop.length; r++){             
       if (getShop[r].checked) {                         
          getShopName = getShop[r].value;            
        }
    }
    
    var getComment = document.getElementById("comment");     
    
    date       = document.getElementsByName("date")[count];       
    name       = document.getElementsByName("name")[count];     　　　
    get        = document.getElementsByName("get")[count];     
    importance = document.getElementsByName("importance")[count]; 
    comment    = document.getElementsByName("comment")[count]; 
    
    date.innerHTML       += getDate;
    get.innerHTML        += getShopName;
    comment.innerHTML    += getComment.value;
    name.innerHTML       += getColumn.innerHTML;                    
    importance.innerHTML += getColumn.value;                                             
    
    changeColor();
    
    count++;                                                   
}

```

HTML?

```html:
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>sample</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script src=“http://code.jquery.com/jquery-1.11.1.js"></script>
    <script src = "http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
    <script type ="text/javascript" src = "js/tablesorter/jquery-latest.js"></script>
    <script type = "text/jacascript" src = "js/tablesorter/jquery.tablesorter.js"></script>
    <link rel="stylesheet" type="text/css" href = "js/tablesorter/themes/blue/style.css"/>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" />
    <script src = "Script.js"></script>
</head>

<body>
    <form name = "fm">
    <label>カード入手年月日 <input type="text" id="datepicker" ></label>
    <select id = "menu">
        <option value = "激レア">スーパーデウス</option>
        <option value = "超レア">アンドロコモコ</option>
        <option value = "レア">十六夜大和</option>
        <option value = "レア">聖☆おにいさん</option>
        <option value = "レア">ニャンニャンリアガール</option>
        <option value = "レア">桃太郎悪魔</option>
        <option value = "レア">キビダンゴ五十嵐</option>
        <option value = "レア">鬼が縞</option>
        <option value = "超レア">お祓い観音</option>
        <option value = "レア">ハゲ</option>
        <option value = "超レア">ジャマー</option>
        <option value = "レア">ゴッドマングース</option>
        <option value = "超レア">ミスタービーン</option>
    </select>
    </br></br> 
    <input  type = "radio" name = "shop" value = "コンビニエンスストア"><label>コンビニ</label>
    <input  type = "radio" name = "shop" value = "スーパーマーケット" ><label>スーパー</label>
    <input  type = "radio" name = "shop" value = "駄菓子屋"><label>駄菓子屋</label>
    <label>コメント</label><input id = "comment" type = "text" name = "line" value = "">
    </br></br>

    </form>
    <button onclick = "tableControl()" >登録</button>
    <table border = "1" id = "myTable">
        <tr>
            <th>入手年月日</th><th>名称</th><th>入手場所</th><th>レア度</th><th>コメント</th>
        </tr>
    </table>
</body>
</html>
```