从具有 jQuery 的数组动态生成 <table> 时如何排除 ID 列

How to exclude ID column when dynamically generating <table> from array of arrays with jQuery

我正在使用 jQuery 进行 ajax 调用以从 ColdFusion 服务器获取数据。服务器查询数据库 table 和 returns 多条记录作为二维数组。 jQuery 代码然后在 <table>.

中(动态地)显示数组值

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

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

数据库Table列:

这是在 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: "test@aol.com"
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>test@aol.com</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"});
      }
    })

对不起我的英语。

由于您使用的数组大小为 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>`
        }

    }
}

希望对您有所帮助

稍微修改一下您的 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],外循环遍历所有客户,内循环遍历数据此客户 i 的列 j。希望这对您理解代码有所帮助。