

画面でテーブルに対して行をクリックし、黄色行になっている状態で「ファイル名取得ボタン」を押し、黄色行のファイル名をJavaのサーブレットクラスに渡したいと思います。テーブルに対して行をクリックし、黄色行にするとこまでできているのですが、ファイル名を取得してJavaのサーブレットクラスにファイル名を渡すコードをどう書くか分かりません。どう書けばよろしいでしょうか。

[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>
    <script>
        function sentaku(pos) {
            switch (pos) {
            case 1:
                document.getElementById("tr1").style.backgroundColor = "yellow";
                document.getElementById("tr2").style.backgroundColor = "white";
                break;
            case 2:
                document.getElementById("tr2").style.backgroundColor = "yellow";
                document.getElementById("tr1").style.backgroundColor = "white";
                break;
            }
        }
    
    </script>
    </head>
    <body>
    
        <h1>ファイルダウンロード画面</h1>
        <div class="container">
            <form name="download" action="/downloadfile" method="post">
    
                <table id="name_tbl" 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></t    h>
                        <th bgcolor="#EE0000" width="200"><font color="#FFFFFF">備考</font></th>
                    </tr>
                    <tr id="tr1" onclick="sentaku(1)">
                        <td align="right" nowrap>１</td>
                        <td valign="top" width="150">aaa.text</td>
                        <td valign="top" width="200">-</td>
                    </tr>
                    <tr id="tr2" onclick="sentaku(2)">
                        <td align="right" nowrap>２</td>
                        <td valign="top" width="150">bbb.text</td>
                        <td valign="top" width="200">-</td>
                    </tr>
                </table>
                <div style="padding-top: 10px">
                    <button class="btn btn-primary"
                        type="submit">ファイル名取得ボタン</button>
                </div>
            </form>
        </div>
    </body>
    
[/code]


CC BY-SA 3.0
2017-05-14T13:37:07.333
34702
2023-10-13T03:09:46.320
17348
question
java jquery bootstrap jsp
ファイル名を取得してサーブレットクラスに渡したい。


ざっくりと書いてみましたけど、こんな感じでどうでしょうか。  
表の行をクリックした時点の行番号を保存（currentPos）しておきます。ファイル名取得ボタンを押したときに、その情報からファイル名を取得します。つづけて、そのファイル名をformのaction属性にセットしてフォームをsubmitしています。

Servletでは、downloadというURLのリクエストを受取、パラメーターfileNameからファイル名を受け取ることができます。

[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>
    <script>
        var currentPos = -1;
        function sentaku(pos) {
            currentPos = pos;
            switch (pos) {
            case 1:
                document.getElementById("tr1").style.backgroundColor = "yellow";
                document.getElementById("tr2").style.backgroundColor = "white";
                break;
            case 2:
                document.getElementById("tr2").style.backgroundColor = "yellow";
                document.getElementById("tr1").style.backgroundColor = "white";
                break;
            }
        }
    </script>
    </head>
    <body>
    
        <h1>ファイルダウンロード画面</h1>
        <div class="container">
            <form name="download" action="/downloadfile" method="post">
    
                <table id="name_tbl" 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></t    h>
                        <th bgcolor="#EE0000" width="200"><font color="#FFFFFF">備考</font></th>
                    </tr>
                    <tr id="tr1" onclick="sentaku(1)">
                        <td align="right" nowrap>１</td>
                        <td valign="top" width="150">aaa.text</td>
                        <td valign="top" width="200">-</td>
                    </tr>
                    <tr id="tr2" onclick="sentaku(2)">
                        <td align="right" nowrap>２</td>
                        <td valign="top" width="150">bbb.text</td>
                        <td valign="top" width="200">-</td>
                    </tr>
                </table>
                <div style="padding-top: 10px">
                    <button id="getFileName" class="btn btn-primary"
                        type="button">ファイル名取得ボタン</button>
                </div>
            </form>
        </div>
        <script>
        document.getElementById("getFileName").addEventListener("click", function() {
            //ファイル名の取得
            var fileName = document.querySelector("#tr" + currentPos + " td:nth-child(2)").textContent;
            // formのactionにセットし、submit
            var form = document.getElementsByTagName("form")[0];
            form.action = "dowonloadFile?fileName=" + fileName;
            form.submit();
        }, false);
        </script>
    </body>
    
[/code]


CC BY-SA 3.0
2017-05-15T21:45:48.533
34737
2017-05-15T21:45:48.533
2214
34702
answer