首页 > 解决方案 > 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然后显示在这里

标签: javascripthtml

解决方案


使用 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方法接收参数。


推荐阅读