Question

我有一个次优的解决方案，我需要遍历数组并替换<table>中的文本，具体取决于是否找到这些值。目前重构拉动此数据的逻辑不是一种选择，所以在这里：

我有一个Department对象数组，可以在我的页面加载时读取：

[{id: 1, name: "Arts & Sciences"}, {id: 2, name: "Mathematics"}, {id: 3, name: "History"}]

我还有一组建筑物对象

[{id: 50, name: "Building 50"}, {id: 62, name: "Building 62"}, {id: 21, name: "Building 21"}]

在我的DOM上，我有一个填充了部门ID及其相应的建筑物ID

的表格

<tr>
    <td>1</td>  // Arts & Sciences
    <td>50</td> // Building 50
</tr>
<tr>
    <td>2</td>  // Mathematics
    <td>62</td> // Building 62
</tr>
<tr>
    <td>3</td>  // History
    <td>21</td> // Building 21
</tr>

我想知道是否有一种简单易用的方法来使用我可以使用这些数组的正确值来替换表中的值。

同样，我不能改变应用程序的流程来代替拉取文本值，就像我想的那样。

感谢任何输入！

Answer 1

有一张桌子，第一列是Departments，第二列是Building，我会这样：

function arrToObj(arr, key) {
    var res = {};
    for (var i = 0, a; a = arr[i]; i++) {
        res[a[key]] = a;
    }
    return res;
}

var depsArr = [{id: 1, name: "Arts & Sciences"}, {id: 2, name: "Mathematics"}, {id: 3, name: "History"}];
var depsObj = arrToObj(depsArr, "id");

var buildsArr = [{id: 50, name: "Building 50"}, {id: 62, name: "Building 62"}, {id: 21, name: "Building 21"}];
var buildsObj = arrToObj(buildsArr, "id");

var tds = table.getElementsByTagName("td");
for (var i = 0, tdDep, tdBuild; (tdDep = tds[i]) && (tdBuild = tds[i+1]); i += 2) {
    tdDep.textContent = depsObj[tdDep.textContent].name;
    tdBuild.textContent = buildsObj[tdBuild.textContent].name;
}

我尝试通过创建一个对象然后循环表来最小化循环。这将有一个有2列的固定表。

Answer 2

如果你可以使用jQuery试试这个（不知道如何翻译成纯粹的js）

for(var i=0;i<buildings.length;i++){
    $('td').filter(function(){
        return $(this).text() == buildings[i].id
    }).text(buildings[i].name);
}

https://jsfiddle.net/nz7gqw7g/

Answer 3

Javascript方式

使用createElement创建tr和td以及appendChild td到tr，最后转到table

＆＃13;

var ar1=[{id: 1, name: "Arts & Sciences"}, {id: 2, name: "Mathematics"}, {id: 3, name: "History"}]


var ar2=[{id: 50, name: "Building 50"}, {id: 62, name: "Building 62"}, {id: 21, name: "Building 21"}]

var table=document.getElementById('table')

table.innerHTML="" /*clear existing table*/

for(var i=0;i<ar1.length;i++){
var tr=document.createElement('tr')
var td1=document.createElement('td')
    td1.innerText=ar1[i].name
var td2=document.createElement('td')
    td2.innerText=ar2[i].name 
    tr.appendChild(td1)
    tr.appendChild(td2)
    table.appendChild(tr)
}

＆＃13;

<table id="table"></table>

＆＃13;

Answer 4

您可以使用for循环迭代数组并访问table元素以覆盖它。写入表格单元格在此链接中给出：How to insert text in a td with id, using javascript

   for (var i in array) {

      // get access to td cell
    // write into the cell 
    // access data  using array[i]

    }

将这两个逻辑结合起来将是您的解决方案。

用数组值替换DOM上的值

4 个答案: