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，但是由于这只是问询者代码的一小部分，他们要求我简化它以允许他们添加更多列稍后的。考虑到这一点，这里是一个修改后的版本，该版本仍然可以防止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);
    // ...
}

您可以看到此代码运行here。

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>

另外，请参见小提琴链接here

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

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

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

3 个答案: