Get row and column item from a dynamic html table

Asked

Viewed 821 times

0

Good morning guys, I’ve set up a dynamic html table with information from an SQL table. In the following structure:

inserir a descrição da imagem aqui

This table has a filter field of the agencies listed code:

    <script>
        function myBusca() {
 
            var input, filter, table, tr, td, i;
            input = document.getElementById("myInput");
            filter = input.value.toUpperCase();
            table = document.getElementById("myTable");
            tr = table.getElementsByTagName("tr");

            for (i = 0; i < tr.length; i++) {
                td = tr[i].getElementsByTagName("td")[0];
                if (td) {
                    if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
                        tr[i].style.display = "";
                    } else {
                        tr[i].style.display = "none";
                    }
                }
            }
        }
    </script>

I need to click on the icon of each line get the agency name and its code and send to a Textbox field I’m trying with the following script:

    <script type="text/javascript">
        function myFunction() {
            var x = document.getElementById("cidade").value;
            document.getElementById("<%=txtCidadeAgencia.ClientID %>").value = x;
        }
    </script>

<td style='vertical-align: middle;'>" +
 "<input id='cidade' name='cidade' " +
 "type='hidden' value='{0}'>" +
 "<a href= \"#\"" +
 "class=\"btn btn-default\" " +
 "onclick='myFunction()' data-toggle='modal' " +
 "data-target='#myModal' data-dismiss='modal'>" +
 "<i src=\"#\" class='fa fa-hand-pointer-o'></i></a>" +
 "</td></tr>"

But I can’t, I imagine I have to take the index from the line to get the fields from the selection. Could someone give me some guidance.

Thank you.

  • Could assign an onclick event to the icon, when it is triggered it calls a Javascript function by passing the text to fill the textbox.

  • I am passing the onclick='myFunction()' event on the icon like this: <td style='vertical-align: Middle;'>" + "<input id='city' name='city' " + "type='Hidden' value='{0}'>" + "<a href= "#"" + "class="btn btn-default" + "onclick='myFunction()' data-toggle='modal' " + "data-target='#myModal' data-Dismiss='modal'>" + "<i src="#" class='fa fa fa-hand-Pointer-o'></i></a>" + "</td></tr>"

  • I imagined it this way onclick="myFunction('Texto Para Ser Exibido')" and in that capacity myFunction(x) receives the x and arrow document.getElementById("<%=txtCidadeAgencia.ClientID %>").value = x;.

  • Remembering that it is important to give meaningful names to variables.

  • 1

    Thanks @LP. Gonçalves, man was explicit and I didn’t see! I’m playing more now with javascript, formerly only webforms/aspx.

1 answer

1


Solution:

Icon code:

 html.AppendFormat(
                    "<td style='vertical-align: middle;'>" +
                    "<a href= \"#\"" +
                    "class=\"btn btn-default\" " +
                    "onclick='myFunction(\"{0}\")' data-toggle='modal' " +
                    "data-target='#myModal' data-dismiss='modal'>" +
                    "<i src=\"#\" class='fa fa-hand-pointer-o'></i></a>" +
                    "</td></tr>", item.CidadeAgencia);

Function to get the selected item in the table, and send to a Textbox field:

    <script type="text/javascript">
        function myFunction(cidade) { 
           document.getElementById("<%=txtCidadeAgencia.ClientID %>").value = cidade;
        }
    </script>

Thank you LP. Gonçalves

Browser other questions tagged

You are not signed in. Login or sign up in order to post.