从具有 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列:
- 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: "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
。希望这对您理解代码有所帮助。
我正在使用 jQuery 进行 ajax 调用以从 ColdFusion 服务器获取数据。服务器查询数据库 table 和 returns 多条记录作为二维数组。 jQuery 代码然后在 <table>
.
问题是我不想显示 字段之一:CustomerID
。相反,我想提取该值并使用它来创建指向另一个页面的超链接。但是,我不确定如何解决这个问题。我考虑过使用 .map
、.filter
等,但似乎没有任何效果,我处于停滞状态。有什么想法吗?
我希望这是有道理的。如果我需要修改,我很乐意这样做。任何和所有的帮助表示赞赏。谢谢。
数据库Table列:
- 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: "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
。希望这对您理解代码有所帮助。