

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

[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]


CC BY-SA 3.0
2017-05-14T10:45:05.883
34698
2017-07-03T04:18:06.327
2017-05-14T11:01:28.097
17348
17348
question
html jquery bootstrap
画面のテーブルに対して行選択するコードの書き方について。


難しいことは考えず、行を選択しているというチェックボックス列を追加してやればよいかと思われます。  
その後選択されているcheckboxの値を取り出し、よしなにしてやればよいかと。

[code]

    <!DOCTYPE html>
    <html lang="ja">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>ファイルダウンロード</title>
        <script
        src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script>
            function getSelected() {
                var checkedValues = $('.checkboxes:checked').map(function(index, checkbox) {
                    return $(checkbox).val();
                }).toArray();
                console.log(checkedValues);
            }
        </script>
    </head>
    <body>
        <button onclick="getSelected()">選択行を取得</button>
        <table border="1" width="500" cellspacing="0" cellpadding="5" bordercolor="#333333">
            <tr>
                <th bgcolor="#EE0000">
                </th>
                <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="center"><input type="checkbox" class="checkboxes" value="aaa.text" /></td>
                <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="center"><input type="checkbox" class="checkboxes" value="bbb.text" /></td>
                <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>
    
    </body>
    </html>
[/code]


CC BY-SA 3.0
2017-05-14T11:13:59.300
34699
2017-05-14T11:13:59.300
15705
34698
answer


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]


CC BY-SA 3.0
2017-05-14T17:09:08.520
34709
2017-05-14T17:19:03.167
2017-05-14T17:19:03.167
22793
22793
34698
answer