Jquery での構文エラーが出て困っています

Question

jQueryで構文エラーが出ています。
どのように対処すればよいでしょうか？

Ajaxで処理をしたあとの処理です
success: function(data,status){
$('#result_table').empty();
$("#result_table").append('<tr><th>名称</th><th>住所</th<th>更新</th><th>削除</th>></tr>');
if(data.length > 0){
for(var i in data){
$("#table").append('<tr><td>' + data[i].name + '</td><td>' + data[i].address + '</td><td><input type="button" value="更新" onclick="location.href='/data/detail/" + data[i].id + "'" /></td><td><input type="button" class="delete" value="削除" /></td></tr>');
}
}
},

onclick="location.href='/data/detail/" + data[i].id + "'"の部分にエラーがあるようです・・・orz

教えてください。
よろしくお願いいたします。

Answer 1

バッククオートと${}で囲むと変数展開できます。
ECMAScript 2015からの実装なので、対応するブラウザによっては使えませんが参考までに

`<tr><td>${data[i].name}</td><td>${data[i].address}</td><td><input type="button" value="更新" onclick="location.href='/data/detail/${data[i].id}' /></td><td><input type="button" class="delete" value="削除" /></td></tr>`

Answer 2

location 文字列を作るところが " と ' で入れ子になって難しいので

var loc = "location.href='/data/detail/" + data[i].id + "'";
$("#table").append('<tr><td>' + data[i].name + '</td><td>' + data[i].address + '</td><td><input type="button" value="更新" onclick="' + loc + '" /></td><td><input type="button" class="delete" value="削除" /></td></tr>'); 

こんな感じに整理してみたらどうでしょう？

Comments

[hidepon]

なるほどです。勉強になりました。ありがとうございました。