画面のテーブルに対して行選択するコードの書き方について。


仕様として画面のテーブルに対して行選択しているファイルをダウンロードボタンでダウンロードできるものを考えています。  
まず行選択できるコードの書き方が分からなくて悩んでいます。行選択できるようにするにはどういったコードを追記すればよろしいでしょうか。  
ソースは下記となります。

[code]

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <title>ファイルダウンロード</title>
    
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
    
    <script
        src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    
    <script src="bootstrap/js/bootstrap.min.js"></script>
    
    </head>
    <body>
    
        <h1>ファイルダウンロード画面</h1>
        <div class="container">
            <table border="1" width="500" cellspacing="0" cellpadding="5"
                bordercolor="#333333">
                <tr>
                    <th bgcolor="#EE0000"><font color="#FFFFFF">Ｎｏ</font></th>
                    <th bgcolor="#EE0000" width="150"><font color="#FFFFFF">ファイル名</font></th>
                    <th bgcolor="#EE0000" width="200"><font color="#FFFFFF">備考</font></th>
                </tr>
                <tr>
                    <td bgcolor="#99CC00" align="right" nowrap>１</td>
                    <td bgcolor="#FFFFFF" valign="top" width="150">aaa.text</td>
                    <td bgcolor="#FFFFFF" valign="top" width="200">-</td>
                </tr>
                <tr>
                    <td bgcolor="#99CC00" align="right" nowrap>２</td>
                    <td bgcolor="#FFFFFF" valign="top" width="150">bbb.text</td>
                    <td bgcolor="#FFFFFF" valign="top" width="200">-</td>
                </tr>
            </table>
            <div style="padding-top: 10px">
                <button class="btn btn-primary" type="submit">ダウンロード</button>
            </div>
        </div>
    </body>
    </html>
    
[/code]




class(dataとfilename)とattribute(flag)を付加してサンプルを書いてみました。  
色々な方法がありますが、こんな感じでしょうか。  
選択行を取得ボタンの処理結果はconsole.logへ出力しました。

[code]

    $(function(){
                $('.data').on("click",function(){
                    var no = $('.data').index(this);
                        if((no < $('.data').length) && (no > 0)){
                            var flag = $('.data').eq(no).attr("flag");
                            if(flag == "0"){
                                $('.data').eq(no).css("background-color","greenyellow");
                                $('.data').eq(no).attr("flag","1");
                            }else{
                                $('.data').eq(no).css("background-color","#ffffff");
                                $('.data').eq(no).attr("flag","0");
                            }
                        }
                    }
                );
    
                $('#button').on("click",function(){
                        for(var i=0;i<$('.data').length;i++){
                            var flag = $('.data').eq(i).attr("flag");
                            if(flag == "1"){
                                console.log($('.filename').eq(i).text());
                            }
                        }
                    }
                );
    
    
                $('.data').css("background-color","#ffffff");
                $('.data').attr("flag","0");
    
    
            });
[/code]

[code]

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <body>
    <button id="button">選択行を取得</button>
    <table border="1" width="500" cellspacing="0" cellpadding="5" bordercolor="#333333">
        <tr class="data">
            <th bgcolor="#EE0000">
                <font color="#FFFFFF">Ｎｏ</font>
            </th>
            <th class="filename" bgcolor="#EE0000" width="150">
                <font color="#FFFFFF">ファイル名</font>
            </th>
            <th bgcolor="#EE0000" width="200">
                <font color="#FFFFFF">備考</font>
            </th>
        </tr>
        <tr class="data">
            <td align="right" nowrap>１</td>
            <td class="filename" valign="top" width="150">aaa.text</td>
            <td valign="top" width="200">-</td>
        </tr>
        <tr class="data">
            <td align="right" nowrap>２</td>
            <td class="filename" valign="top" width="150">bbb.text</td>
            <td valign="top" width="200">-</td>
        </tr>
    </table>
    
    </body>
[/code]

