我使用下面的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;)而不是空格。如何解决?
答案 0 :(得分:1)
由于onclick
属性值中有空格,因此应将其值换行,例如""
:
...<a onclick=\"deleteDocument(this,'" + filesName + "')\">...
而不是内联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);
});