javascript - javascript尝试使用onclick将数据从表中的行发送到另一个页面
问题描述
当我单击一个按钮到另一个页面时,我试图从表中的行发送数据
因此,当我单击按钮时,我希望将该行中的数据发送到另一个页面
在该页面中,我希望出现我选择的行
function catalogo() {
//debugging para ver se foi pedido com sucesso
console.log(' pedido get entrou success');
//create table to hold results
var txt = "";
txt += "<div class='table-responsive'>";
txt += "<table id='tblLivrosCatalogo' class='table table-sm'>";
txt += "<thead color:white '>";
txt += "<tr> <th>#ID</th> <th>Titulo</th> <th>Autor</th> <th>Género</th><th>Ano De Lançamento</th><th>Proprietário</th><th>Disponibilidade</th></tr></thead><tbody>";
//percorrer a variável data e por cada row cria a linha da tabela com os dados presentes
for (var i = 0; i < lista.length; i++) {
if (lista[i].disp_req == "Disponivel") {
// console.log(i)
//aqui os id's são os do mysql
txt += "<tr><td>" + lista[i].id_livro + "</td><td>" + lista[i].titulo +
"</td><td>" + lista[i].autor + "</td><td>" + lista[i].genero + "</td><td>" + lista[i].ano_lanc + "</td><td>" + lista[i].user_prop + "</td><td>" + lista[i].disp_req + "</td><td>" + "<a><i onclick ='clickk()' id='icon' class='fas fa-book' data-toggle='tooltip' title='Requisitar Livro'></i></a>" + "</tr>"
}
else {
//aqui os id's são os do mysql
txt += "<tr><td>" + lista[i].id_livro + "</td><td>" + lista[i].titulo +
"</td><td>" + lista[i].autor + "</td><td>" + lista[i].genero + "</td><td>" + lista[i].ano_lanc + "</td><td>" + lista[i].user_prop + "</td><td>" + lista[i].disp_req + "</td></tr>"
}
}
txt += "</tbody></table></div>";
// send the table constructed for the view and show the result ( txt) in the object with ID result
$("#tablecatalogo").html(txt);
}
注意:这个表是mysql在我注册一本书时生成的,它转到mysql然后显示在这里
解决方案
使用 Jquery,您可以通过简单地添加一个函数来做到这一点:
function clickk(element) {
var rowData = $(this).parent().children("td").map(function() {
return $(this).text();
}).get();
// pass to another page
window.location = '/page.html?params=' + JSON.stringify(rowData);
}
你的 HTML
...
<a onclick='clickk(this)'><i id='icon' class='fas fa-book' data-toggle='tooltip' title='Requisitar Livro'></i></a>
...
现在您将通过GET
方法接收参数。
推荐阅读
- ionic-framework - 如何在某些选项卡中创建身份验证
- r - 如何在 R 的函数中使用 colnames() 而不将数字输出转换为字符?
- ansible - 在 Ansible playbook 中针对特定主机执行特定任务
- c# - 当我在循环中使用 gridview 时,导出返回空
- mysql - 如何禁用 only_full_group_by?
- java - Jsoup 解析三重嵌套跨度
- laravel - 如何在 Laravel 中对多个表使用身份验证
- powershell - 无法使用 PAT 对 Azure DevOps _apis/distributedtask/variablegroups 进行身份验证
- javascript - 为什么节点找不到模块?(即使我不需要它)
- c - 如何从串行 C 读取多行,由回车和换行终止?