How to write a line selection code for a table on the screen.

As a specification, I am thinking of a file that can be downloaded from the table on the screen with the download button.
First of all, I'm worried because I don't know how to write a code that can select a line.What code should I add to make it possible to select a line?
The source is as follows:

<!DOCTYPE html>
<html lang="ja">
<head>
<metacharset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>File Download</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>File Download Screen</h1>
    <div class="container">
        <table border="1" width="500" cellspacing="0" cellpadding="5"
            bordercolor="#333333">
            <tr>
                <thbgcolor="#EE0000">font color="#FFFFFF">No</font>>
                <thbgcolor="#EE0000" width="150"><font color="#FFFFFF">filename</font>/th>
                <thbgcolor="#EE0000" width="200"><font color="#FFFFFF">Notes</font>>
            </tr>
            <tr>
                <td bgcolor="#99CC00" align="right" nowrap>1</td>
                <td bgcolor="#FFFFFF" value="top" width="150">aaa.text</td>
                <td bgcolor="#FFFFFF" value="top" width="200">-</td>
            </tr>
            <tr>
                <td bgcolor="#99CC00" align="right" nowrap>2</td>
                <td bgcolor="#FFFFFF" value="top" width="150">bbb.text</td>
                <td bgcolor="#FFFFFF" value="top" width="200">-</td>
            </tr>
        </table>
        <div style="padding-top:10px">
            <button class="btn btn-primary" type="submit">Download</button>
        </div>
    </div>
</body>
</html>

html jquery bootstrap

2022-09-30 14:02

2 Answers

I wrote a sample with class(data and filename) and attribute(flag).
There are many ways, but I wonder if it's like this.
The result of the Get Selected Row button was output to console.log.

$(function(){
            $('.data').on("click", function(){
                var no = $('.data') .index(this);
                    if((no<$('.data').length)&(no>0)){
                        varflag = $('.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 (vari=0;i<$('.data').length;i++){
                        varflag = $('.data') .eq(i).attr("flag");
                        if(flag=="1"){
                            console.log($('.filename') .eq(i).text());
                        }
                    }
                }
            );


            $('.data') .css("background-color", "#ffffff";
            $('.data') .attr("flag", "0");


        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<body>
<button id="button">Get the selection line</button>
<table border="1" width="500" cellspacing="0" cellpadding="5" bordercolor="#3333">
    <tr class="data">
        <thbgcolor="#EE0000">
            <font color="#FFFFFF">No</font>
        </th>
        <th class="filename" bgcolor="#EE0000" width="150">
            <font color="#FFFFFF"> Filename</font>
        </th>
        <thbgcolor="#EE0000" width="200">
            <font color="#FFFFFF">Notes</font>
        </th>
    </tr>
    <tr class="data">
        <td align="right" nowrap>1</td>
        <td class="filename" value="top" width="150">aaa.text</td>
        <td value="top" width="200">-</td>
    </tr>
    <tr class="data">
        <td align="right" nowrap>2</td>
        <td class="filename" value="top" width="150">bbb.text</td>
        <td value="top" width="200">-</td>
    </tr>
</table>

</body>

2022-09-30 14:02

You may want to add a check box column that says you are selecting a row without thinking about any difficulties.
After that, I think I should take out the selected checkbox value and do as I like.

<!DOCTYPE html>
<html lang="ja">
<head>
    <metacharset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>File Download</title>
    <script
    src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
        function getSelected() {
            varcheckedValues=$('.checkboxes:checked') .map(function(index,checkbox){
                return$(checkbox).val();
            }).toArray();
            console.log (checkedValues);
        }
    </script>
</head>
<body>
    <button onclick="getSelected()">Get a selection line</button>
    <table border="1" width="500" cellspacing="0" cellpadding="5" bordercolor="#3333">
        <tr>
            <thbgcolor="#EE0000">
            </th>
            <thbgcolor="#EE0000">
                <font color="#FFFFFF">No</font>
            </th>
            <thbgcolor="#EE0000" width="150">
                <font color="#FFFFFF"> Filename</font>
            </th>
            <thbgcolor="#EE0000" width="200">
                <font color="#FFFFFF">Notes</font>
            </th>
        </tr>
        <tr>
            <td bgcolor="#99CC00" align="center"><input type="checkbox" class="checkboxes" value="aaa.text"/></td>
            <td bgcolor="#99CC00" align="right" nowrap>1</td>
            <td bgcolor="#FFFFFF" value="top" width="150">aaa.text</td>
            <td bgcolor="#FFFFFF" value="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>2</td>
            <td bgcolor="#FFFFFF" value="top" width="150">bbb.text</td>
            <td bgcolor="#FFFFFF" value="top" width="200">-</td>
        </tr>
    </table>

</body>
</html>

2022-09-30 14:02

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656