使用 jquery 在動態 html 的輸入標簽的 class 內添加空格

Question

我正在從 json 數據動態創建 html 表，並且無法在我的輸入按鈕控件中添加空格，因為在用空格分隔兩個類之后，我不熟悉使用片段，所以代碼在這里不起作用，但在我的環境中工作正常，非常感謝提前...

 function tableGenerator(selector, jsonData, tab) { debugger; // jsonData is an array var keys = Object.keys(Object.assign({}, ...jsonData)); // Get the keys to make the header // Add header var head = '<thead><tr>'; keys.forEach(function(key) { head += '<th>' + key + '</th>'; }); head += '<th>Get Data</th>'; var rowId = 0; $(selector).append(head + '</tr></thead>'); // Add body var body = '<tbody>'; jsonData.forEach(function(obj) { // For each row var row = '<tr>'; keys.forEach(function(key) { // For each column row += '<td>'; if (obj.hasOwnProperty(key)) { // If the obj doesnt has a certain key, add a blank space. row += obj[key]; } row += '</td>'; }); debugger; row += ' <td> <input type="button" id=' + 'btnSelect' + rowId + ' value="Select" class=' + '"btnClass\xa0btnCustomClass' + tab + '" />Get Data </td> '; //row += ' <td> <input type="button" id='+'btnSelect'+rowId+ ' value="Select" class="btnClass btnCustomClass" />Get Data </td> '; body += row + '<tr>'; rowId = rowId + 1; // SelectDataFromTbl(tab, rowId); }) $(selector).append(body + '</tbody>'); } var jsonData = [{ "TransactionType": "REVERSAL", "TransactionRange": "Is Lower Than ", "TransactionRule": "Block transaction", "AmountFrom": 500, "AmountTo": 500, "PlausibilityTransTypeId": 4, "PlausibilityTransRangeId": 2, "PlausibilityRuleActionId": 1, "PlausibilityRuleDetailId": 188 }, { "TransactionType": "REVERSAL", "TransactionRange": "Is Between", "TransactionRule": "Allow transaction", "AmountFrom": 500, "AmountTo": 500, "PlausibilityTransTypeId": 4, "PlausibilityTransRangeId": 3, "PlausibilityRuleActionId": 3, "PlausibilityRuleDetailId": 189 }, { "TransactionType": "REVERSAL", "TransactionRange": "Is Between", "TransactionRule": "Move transaction in suspect console", "AmountFrom": 10000, "AmountTo": 10000, "PlausibilityTransTypeId": 4, "PlausibilityTransRangeId": 3, "PlausibilityRuleActionId": 2, "PlausibilityRuleDetailId": 190 }, { "TransactionType": "REVERSAL", "TransactionRange": "Is Higher Than", "TransactionRule": "Block transaction", "AmountFrom": 100000, "AmountTo": 100000, "PlausibilityTransTypeId": 4, "PlausibilityTransRangeId": 1, "PlausibilityRuleActionId": 1, "PlausibilityRuleDetailId": 191 }]; tableGenerator('#tbltab2', jsonData, 'tab2')

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table id="tbltab2" style="width: 100%;"></table>

Answer 1

要分隔您創建的button中的類，您可以簡單地使用單個空格字符。 不需要任何 unicode。 另請注意，在從 JSON 反序列化的對象數組上使用map()可以使 HTML 生成更加簡潔和簡化。 嘗試這個：

 function tableGenerator(selector, jsonData, tab) { var keys = Object.keys(Object.assign({}, ...jsonData)); let headerHtml = `<thead><tr>${keys.map(k => `<th>${k}</th>`).join('')}<th>Get Data</th></tr></thead>`; let buttonCell = `<td><input type="button" value="Select" class="btnClass btnCustomClass${tab}" />Get Data</td>`; let bodyRowsHtml = jsonData.map(o => `<tr>${keys.map(k => `<td>${o[k]}</td>`).join('')}${buttonCell}</tr>`); $(selector).append(`${headerHtml}<tbody>${bodyRowsHtml}</tbody>`); } var jsonData = [{TransactionType:"REVERSAL",TransactionRange:"Is Lower Than ",TransactionRule:"Block transaction",AmountFrom:500,AmountTo:500,PlausibilityTransTypeId:4,PlausibilityTransRangeId:2,PlausibilityRuleActionId:1,PlausibilityRuleDetailId:188},{TransactionType:"REVERSAL",TransactionRange:"Is Between",TransactionRule:"Allow transaction",AmountFrom:500,AmountTo:500,PlausibilityTransTypeId:4,PlausibilityTransRangeId:3,PlausibilityRuleActionId:3,PlausibilityRuleDetailId:189},{TransactionType:"REVERSAL",TransactionRange:"Is Between",TransactionRule:"Move transaction in suspect console",AmountFrom:1e4,AmountTo:1e4,PlausibilityTransTypeId:4,PlausibilityTransRangeId:3,PlausibilityRuleActionId:2,PlausibilityRuleDetailId:190},{TransactionType:"REVERSAL",TransactionRange:"Is Higher Than",TransactionRule:"Block transaction",AmountFrom:1e5,AmountTo:1e5,PlausibilityTransTypeId:4,PlausibilityTransRangeId:1,PlausibilityRuleActionId:1,PlausibilityRuleDetailId:191}]; tableGenerator('#tbltab2', jsonData, 'tab2')

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table id="tbltab2" style="width: 100%;"></table>