onclick值中的空格会导致HTML格式错误

时间:2014-10-28 12:35:56

标签: javascript jquery html

我使用下面的JavaScript代码将<tr>行追加到<table>

<script type="text/javascript">
    function addRow() {
        var filesName = 'Document Draft.png'
        var newRow = "<tr><td>td Data 1</td><td><a onclick=deleteDocument(this,'" + filesName + "')>Delete</a></td></tr>";
        $("#idDocList").append(newRow);
    } 
</script>

此代码将tr添加到table

问题:但问题是filesName有一个空格,在DOM上呈现错误,如下所示:

<tr>
    <td>td Data 1</td>
    <td>
        <a onclick="deleteDocument(this,'Document" Draft.png')"">Delete</a>
    </td>
</tr>

因此,onclick无法正常工作,因为呈现的HTML

onclick="deleteDocument(this,'Document" Draft.png')

正如您在上面的行中所看到的,它将采用(&#34;)而不是空格。如何解决?

1 个答案:

答案 0 :(得分:1)

由于onclick属性值中有空格,因此应将其值换行,例如""

...<a onclick=\"deleteDocument(this,'" + filesName + "')\">...

Fiddle example

而不是内联JS onclick=""(现在不鼓励),你可以使用jQuery&#39; .on("click")

var filesName = 'Document Draft.png';
var newRow = "<tr><td>td Data 1</td><td><a class='delete'>Delete</a></td></tr>";
$("#idDocList").append(newRow);

$('#idDocList').on('click', ".delete", function()
{
    deleteDocument(this, filesName);
});

Fiddle example