使用jQuery从数组数组动态生成<table>时如何排除ID列

Posted 2023-05-09

【中文标题】使用jQuery从数组数组动态生成<table>时如何排除ID列

【英文标题】：How to exclude ID column when dynamically generating <table> from array of arrays with jQuery

【发布时间】：2019-02-25 01:46:43

【问题描述】：

我正在使用 jQuery 进行 ajax 调用以从 ColdFusion 服务器获取数据。服务器查询数据库表并以二维数组的形式返回多条记录。然后，jQuery 代码在 <table> 中（动态）显示数组值。

问题是我不想显示以下字段之一：CustomerID。相反，我想提取该值并使用它来创建指向另一个页面的超链接。但是，我不确定如何解决这个问题。我考虑过使用.map、.filter 等，但似乎没有任何效果，我处于停滞状态。有什么想法吗？

我希望这是有道理的。如果我需要进行修改，我很乐意这样做。任何和所有的帮助表示赞赏。谢谢。

数据库表列：

InActiveAccount 客户代码 客户 Contact_Person 电话 传真号码 电子邮件地址 客户 ID

这是在 Chrome 中使用 console.log(my2Darray) 的二维数组的样子

[Array(8)]
0: Array(8)
0: false
1: "tstI"
2: "test Inc"
3: "John Doe"
4: "some phone number"
5: "some fax number"
6: "[e-mail]"
7: 1
length: 8

目前<table> 的设置方式是：

<table id="response" border="1">
  <tbody><tr>
    <th>Inactive</th>
    <th>Company Code</th>
    <th>Company Name</th>
    <th>Company Liasion</th>
    <th>Telephone</th>
    <th>Fax</th>
    <th>Email</th>
  </tr>

  <tr>
   <td>false</td>
   <td>tstI</td>
   <td>test Inc</td>
   <td>John Doe</td>
   <td>some telephone number</td>
   <td>some fax number</td>
   <td>[e-mail]</td>
   <td>1</td>
  </tr>
</tbody>
</table>

jQuery 代码：

$.ajax(
      type: 'POST',
      url: 'Search.cfc',
      data: 
        method: 'custCodeData',
        custCode: $('#custCode').val()
      ,
      dataType: 'JSON',
      success: function (data) 
        var array = data.DATA;
        $("#response tr:not(:first)").remove();
        for (var i = 0; i < array.length; i++) 
          var newRow = table.insertRow();
          for (var j = 0; j < array[i].length; j++) 
            var cell = newRow.insertCell(j);
            cell.innerhtml = array[i][j];
            console.log(array);
          
        
        $("#response tr:contains(true)").css("background-color": "#ff0000", "color": "#FFF");
      
    )

【问题讨论】：

使用地图并删除

@G.Rose - 刚刚提出了一个 edit 的建议，这可能有助于澄清您真正要问的问题。如果您不同意，请随时修改或拒绝它:-)

@Ageax 这个编辑确实有很大帮助。谢谢！

@G.Rose - 顺便说一句，我怀疑您使用二维数组的原因是因为这就是 CF 默认返回查询的方式。坦率地说，这不是最直观的结构......严格从代码维护和可读性的角度来看，我可能会从 CF 返回一个结构数组。然后改为按列名访问值。 response[i].CustomerCode, response[i].CustomerID` 等。代码稍微多一些，但从现在起 3 个月后更容易理解和调试...

"...too much time into this already and didn't want to rewrite..." > 虽然我确实感受到了这种情绪，但我更不愿意承认，我决定从问题代码中继续前进，因为我觉得我花了太多时间最终我浪费了更多未来的时间来解决问题代码，然后才变得烦人，最终回去修复它。但有时很难证明修改“有效”的代码是合理的。

【参考方案1】：

稍微修改一下你的 JQuery 代码：

$.ajax(
      type: 'POST',
      url: 'Search.cfc',
      data: 
        method: 'custCodeData',
        custCode: $('#custCode').val()
      ,
      dataType: 'JSON',
      success: function (data) 
        var array = data.DATA;
        $("#response tr:not(:first)").remove();
        for (var i = 0; i < array.length; i++) 
          var newRow = table.insertRow();
          for (var j = 0; j < array[i].length; j++) 
            var cell = newRow.insertCell(j);
            /***** Modification starts from here *****/
            /*If it's customerID of this instance*/
            if(j==7)
              //make your hyperlink, e.g, 
              var link='https://www.customers#'+array[i][j]+'.com';
              cell.innerHTML = link;
            else
              cell.innerHTML = array[i][j];
                            
            /***** Modification ends here *****/
          
        
        $("#response tr:contains(true)").css("background-color": "#ff0000", "color": "#FFF");
      
    )

推理：

我想你对二维数组的工作方式有点困惑，在你的情况下，双循环内部有 array[i][j]，外循环遍历所有客户，内循环遍历列的数据 @987654323这位客户的@i。希望这对您理解代码有所帮助。

【讨论】：

非常感谢您的澄清和您为什么要这样做的理由。两个答案都有帮助，但这个更有意义，更清晰，代码解释更清晰

【参考方案2】：

对不起我的英语。

当您使用大小为 8 的数组时，您知道位置 7（索引 7，从 0 到 7）是公司 ID，您可以将其从循环中排除，如下所示

for (var i = 0; i < array.length; i++) 
    var newRow = table.insertRow();
    for (var j = 0; j < array[i].length; j++) 

        if(j < 7) 
            var cell = newRow.insertCell(j);
            cell.innerHTML = array[i][j];
            console.log(array);
        

        if(j === 7) 
            cell.innerHTML = `<a href='edit/$array[i][j]'>go to compay</a>`
        

    

希望对你有帮助

【讨论】：

感谢您的帮助。非常感谢！您的代码确实有很大帮助，但其他用户解释了他的推理更多。不过再次感谢您！