How I treat a table in html as if it were a form

Asked

Viewed 149 times

1

I am developing in Django an application for procedural research and it would be made based on excel spreadsheets. I found on the internet tutorials to select the table rows, however, I do not know how to develop a button with a function that sends the selected rows as lists in Python to perform the search.

HTML is very simple and the javascript function I copied from an internet tutorial:

var tabela = document.getElementById("minhaTabela");
var linhas = tabela.getElementsByTagName("tr");

for(var i = 0; i < linhas.length; i++){
    var linha = linhas[i];
  linha.addEventListener("click", function(){

        selLinha(this, true); 
    });
}


function selLinha(linha, multiplos){
    if(!multiplos){
    var linhas = linha.parentElement.getElementsByTagName("tr");
    for(var i = 0; i < linhas.length; i++){
      var linha_ = linhas[i];
      linha_.classList.remove("selecionado");
    }
  }
  linha.classList.toggle("selecionado");
}


var btnVisualizar = document.getElementById("visualizarDados");

btnVisualizar.addEventListener("click", function(){
    var selecionados = tabela.getElementsByClassName("selecionado");
  //Verificar se eestá selecionado
  if(selecionados.length < 1){
    alert("Selecione pelo menos uma linha");
    return false;
  }

  var dados = "";

  for(var i = 0; i < selecionados.length; i++){
    var selecionado = selecionados[i];
    selecionado = selecionado.getElementsByTagName("td");
    dados += "CNPJ: " + selecionado[0].innerHTML + " - RAZÃO SOCIAL: " + selecionado[1].innerHTML + " - NOME FANTASIA: " + selecionado[2].innerHTML + "\n";
  }

  alert(dados);
});
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link  rel="stylesheet" href="{% static 'css/banco.css' %}">
</head>
<body>
<button id="visualizarDados">Visualizar Dados</button>

<table border="1" class="dataframe" id="minhaTabela">
  <thead>
    <tr style="text-align: right;">
      <th></th>
      <th>CNPJ</th>
      <th>RazaoSocial</th>
      <th>NomeFantasia</th>
      </tr>
      </thead>
      <tbody>
        <tr>
      <th>0</th>
      <td>00000000000</td>
      <td>xxxxxxxxxxxxx S/A</td>
      <td>xxxxxxxxxxx</td>
      </tr>
    <tr>
      <th>1</th>
      <td>111111111111</td>
      <td>yyyyyyyyyyyy S/A</td>
      <td>yyyyyyyyyyyyyy</td>
      </tr>
     </tbody>
</table>


<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script  src="{% static 'js/banco.js' %}" async> </script>
</body>
</html>

But instead of sending the alert on the screen, I would like to receive these as if the items selected in the table were a form. I don’t know if this is possible, but I don’t understand practically anything about Javascript and I couldn’t find this kind of information on the Internet.

javascript python django

1 answer

0

Well, if anyone ever needs to do the same thing I did, I’ll leave my solution here. I decided through a gambiarra in which I changed the value of the button assigning the variable data that had in javascript.

To do this, first assign a name and a value to the button and insert it into a form:

<form action="{% url 'banco_de_dados' %}" method="post" class="form" name="form" id="formElem">

<button formmethod="post" name="botao" type="submit" value="" id="visualizarDados">Visualizar Dados</button>

</form>

Then, in document js, insert at the end, below Alert(data) the following command:

document.form.botao.value = dados

Then, when clicking on the button it sent as value the information of the selected lines.

No views on Django I downloaded the information via the following command:

def banco_de_dados(request):
    if request.method == 'POST':
        location4 = str(request.POST.get('botao'))
...

Then he just went to process the data.

I repeat, I do not know if this is the best solution, however, it was the one I could find and it is functional, I hope it can be useful to someone.

Browser other questions tagged javascript python django

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