jQuery 動態生成表格編輯按鈕 onclick 參數傳遞錯誤的修正

在使用 jQuery 動態拼接 HTML 字符串生成表格時，為編輯按鈕綁定 onclick 事件並傳遞參數是常見需求。但字符串拼接中的引號嵌套極易導致語法錯誤，使事件無法觸發。

錯誤代碼分析

var html6 = '<td><a href="#" ... onclick=setValue("'+i+'")">編輯</a></td>';
// 問題：雙引號未閉合，導致 HTML 屬性解析錯誤

生成的 HTML 類似：

<a onclick=setValue("1")">編輯</a>  // 多出一個雙引號，屬性值截斷

修正方案一：統一使用單引號包裹屬性值

var html6 = '<td><a href="#" rel="rs-dialog" data-toggle="modal" data-target="#myModal" onclick=\'setValue("' + i + '")\'>編輯</a></td>';

生成：<a onclick='setValue("1")'> — 正確。

修正方案二：轉義雙引號（推薦，更易閱讀）

var html6 = '<td><a href="#" rel="rs-dialog" data-toggle="modal" data-target="#myModal" onclick="setValue(\'' + i + '\')">編輯</a></td>';

生成：<a onclick="setValue('1')"> — 參數被單引號包裹，雙引號包裹屬性值，結構清晰。

最佳實踐：使用事件委託避免內聯事件

內聯 onclick 不利於維護，建議改用 data-* 屬性存儲參數，統一綁定事件：

// 生成按鈕
var html6 = '<td><a href="#" class="edit-btn" data-id="' + i + '">編輯</a></td>';

// 統一綁定（針對動態元素用委託）
$('#tableContainer').on('click', '.edit-btn', function(e) {
    e.preventDefault();
    var id = $(this).data('id');
    setValue(id);
});

優點：HTML 結構乾淨，參數類型自動轉換，支持動態添加的行，符合現代前端規範。

總結

• 字符串拼接時注意引號嵌套層級，推薦方案二（轉義雙引號）。
• 長期項目請採用 事件委託 + data-* 屬性 模式，徹底避免內聯事件的引號地獄。