使用jquery在动态html的一类输入标签内添加空格答案

【问题标题】：Adding space inside a class of input tag of dynamic html using jquery使用jquery在动态html的一类输入标签内添加空格
【发布时间】：2020-08-15 22:13:58
【问题描述】：

我正在从 json 数据动态创建 html 表，并且无法在我的输入按钮控件中添加空格，因为在用空格分隔两个类之后，我是使用 sn-p 的新手，所以代码在这里不起作用但它正在工作在我的环境中很好，提前非常感谢......

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>

【问题讨论】：

标签： jquery css asp.net-mvc dynamic-html

【解决方案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>

【讨论】：