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

Posted 2023-05-08

【中文标题】使用jquery在动态html的一类输入标签内添加空格

【英文标题】：Adding space inside a class of input tag of dynamic html using jquery

【发布时间】：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>

【参考方案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>