Добавление пространства внутри класса входного тега Dynami c html с использованием jquery

Question

Я создаю html таблицу динамически из json данных и не могу добавить пробел внутри моего элемента управления кнопкой ввода, так как после разделения двух классов пробелом, я новичок в использовании сниппета, поэтому код здесь не работает, но в моем окружении все работает отлично, заранее большое спасибо ...

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. Также обратите внимание, что поколение HTML можно сделать более кратким и упрощенным, используя map() для массива объектов, десериализованных из вашего JSON. Попробуйте это:

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>