这是我第一次使用JS,我不知道如何将表中选定的行传递给django的视图文件
这是我的HTML和我的JS:
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>
我不想显示一个警报,而是想让这个变量提交到我的django视图中。我不知道在这种情况下如何创建表单,因为该表是由pandas.to_html生成的,所以我不知道如何在该表中插入表单来发送所选行的列[0]、列[1]和列[2]
请注意,Javascript由浏览器执行,而Django由服务器运行。为了实现通信,您必须使用XHR,也称为“Ajax”
在JS端,您可以创建一个HTTP请求
使用获取API(异步/承诺) https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
或者使用XMLHttpRequest(同步) https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest
您应该将变量转换为JSON,并向服务器创建POST请求
在Django端,请参阅有关如何创建最小控制器和路由以处理POST请求的文档 https://docs.djangoproject.com/en/3.0/intro/tutorial04/
相关问题 更多 >
编程相关推荐