为JavaScript文件中的动态html标签创建带有查询字符串的href标签

Question

我想用查询字符串创建href标记，href标记与通过Javascript代码动态生成的其他html标记串联在一起，所有代码都位于.js文件中。

for (var k = 0; k < member.length; k++) {

        var selectedMember = member[k].memberid;
        var htmlth = "";
        htmlth = "<tr>" + "<th colspan='4'>" + member[k].membername + "</th>"+
            "<th colspan='2'>" + "<a href='Update.php?memberid= member[k].memberid  '>" +
            'Update' + "</a>" + "</th>" +"</tr>" 

        tableHtml.append(htmlth);

上面的代码不起作用，因为href将member [k] .memberid值视为字符串，我该如何在标记内写入member [k] .memberid值并分配给href

Answer 1

我特别不熟悉PHP，但是它只是一个简单的url参数，因此我假定它的工作原理与其他框架相同。 您是否尝试过终止变量前的字符串并在变量后重新启动字符串？

"<a href='Update.php?memberid=' + member[k].memberid + '>"

Answer 2

您必须使用+终止字符串并连接变量，但是此代码在当前状态下极易受到XSS（跨站点脚本）的攻击。 如果用户可以操纵其membername包含<script>alert(1);</script> ，则他们可以为任何加载它的人执行任意的客户端代码。

我之前编写了一个使用document.createElement ， cloneNode来防止XSS的答案，但是由于这只是cloneNode者代码的一小部分，因此他们要求我对其进行简化以允许他们以后添加更多列。 考虑到这一点，这里是一个修改后的版本，该版本仍然可以防止XSS，但是使用innerHTML定义模板行和类的结构，以使用不可信用户数据的元素为目标。

let t_row = document.createElement("tr");
t_row.innerHTML = "<th class='mname' colspan='4'></th><th colspan='2'><a class='mupdate'>Update</a></th>";

for (var k = 0; k < member.length; k++) {
    let selectedMember = member[k].memberid;
    let curr_row = t_row.cloneNode(true);

    curr_row.querySelector('.mname').textContent = member[k].membername;
    curr_row.querySelector('.mupdate').setAttribute("href",`Update.php?memberid=${selectedMember}`);

    tableHtml.appendChild(curr_row);
    // ...
}

您可以看到此代码在这里运行。

Answer 3

如果您需要优雅的JQuery实现，可以尝试以下操作：

 let members = [ { memberid: 1, membername: 'jake' }, { memberid: 2, membername: 'clement' }, { memberid: 3, membername: 'kelvin' } ]; let table = $('<table></table>'); for(var k = 0; k < members.length; k++) { const selectedMember = members[k]; let htmlth = $( "<tr>" + "<th colspan='4'>" + selectedMember.membername + "</th>" + "<th colspan='2'>" + "<a href='Update.php?memberid=" + selectedMember.memberid + "'>" + "Update" + "</a>" + "</th>" + "</tr>" ); table.append(htmlth); } $(document).ready(function(){ $('body').append(table); });

 <!DOCTYPE html> <meta charset="UTF-8"> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="index.js"></script> <title>My test doc</title> </head> <body> <h3>welcome</h3> </body> </html>

另外，请参阅此处的小提琴链接

我包括了对象数组，以便为您提供完整的运行代码。

您的代码存在的问题是，您在字符串引号内包含了member[k].memberid 。 此外，你应该使用selectedMember前面创建访问变量memberid和membername 。

为JavaScript文件中的动态html标签创建带有查询字符串的href标签

问题描述

3 个解决方案

解决方案1
0 2019-07-08 19:02:02

解决方案2
0 2019-07-08 19:09:23

解决方案3
0 已采纳 2019-07-08 21:39:14

为JavaScript文件中的动态html标签创建带有查询字符串的href标签

问题描述

3 个解决方案

解决方案1 0 2019-07-08 19:02:02

解决方案2 0 2019-07-08 19:09:23

解决方案3 0 已采纳 2019-07-08 21:39:14

解决方案1
0 2019-07-08 19:02:02

解决方案2
0 2019-07-08 19:09:23

解决方案3
0 已采纳 2019-07-08 21:39:14