时间戳

首页 > 解决方案 > 如何循环数组并仅获取特定索引的值

javascript - 如何循环数组并仅获取特定索引的值

问题描述

我正在构建一个动态表，我只希望我的 json 中的 3 个值显示并制作一个链接，单击该链接时，其余显示。以下是我的代码，请协助。

var myInvestment =[
    {
      "investmentNo":"00032",
      "amount":"70000",
      "status": "Expired",
      "repayAmt":"70500",
      "description": "Official",
      "maturityDate":"2020-10-31"
  },

{
     "investmentNo":"00034",
     "amount":"5000",
     "status": "Current",
     "repayAmt":"6000",
     "description": "School fees",
     "maturityDate":"2022-03-31"
 }
] 

var investmentTable = document.querySelector("#investmentTable");
        if(myInvestment.length>0){
var col = []; // define an empty array
            for (var i = 0; i < myInvestment.length; i++) {
                for (var key in myInvestment[i]) {
                    if (col.indexOf(key) === -1) {
                        col.push(key);
                    }
                }
            }   

            // CREATE TABLE HEAD .
            var tHead = document.createElement("tHead");                              
            // CREATE ROW FOR TABLE HEAD .
            var hRow = document.createElement("tr");                     
            // ADD COLUMN HEADER TO ROW OF TABLE HEAD.            
            tHead.appendChild(hRow);
            investmentTable.appendChild(tHead);            
            // CREATE TABLE BODY .
            var tBody = document.createElement("tbody");                
            // ADD COLUMN HEADER TO ROW OF TABLE HEAD.
            for (var i = 0; i < myInvestment.length; i++) {            
                    var bRow = document.createElement("tr"); 
                    // CREATE ROW FOR EACH RECORD .
                        var td = document.createElement("td");
                        td.innerHTML = i+1;
                        bRow.appendChild(td);                    

                    for (var j = 0; j < 3; j++) {
                        var td = document.createElement("td");
                        if (j==0) {
                            td.innerHTML = '<a href="#" onclick = "return invModalView('+i+')">'+myInvestment[i][col[j]]+ '</a>';
                          bRow.appendChild(td);
                        }else{
                        td.innerHTML = myInvestment[i][col[j]];
                        bRow.appendChild(td);
                         }if (j==2) {
                        td.innerHTML = '<div class="badge">'+myInvestment[i][col[j]]+ '</div>';
                        if (td.textContent=="Current") {
                            td.innerHTML = '<div class="badge badge-success">'+myInvestment[i][col[j]]+ '</div>';
                        } else {
                                  td.innerHTML = '<div class="badge badge-danger">'+myInvestment[i][col[j]]+ '</div>';
                            }

                        }
                    tBody.appendChild(bRow) 
                    }
            investmentTable.appendChild(tBody);   
            }
}

这是我的模态函数，将显示第二个表

function invModalView(k,myInvestment){
        var modal = document.getElementById("modal-block-normal");
        modal.style.display = "block";
        var investNo = document.getElementById("investNo");
        var investmentTableModal = document.querySelector("#investmentTableModal");  

        myInvestment
  .forEach((item, i) => {

    var row = investmentTable.insertRow();

    row.insertCell(0).innerHTML = item.repayAmt;
    row.insertCell(1).innerHTML = item.description;
    row.insertCell(2).innerHTML = item.maturityDate;
  });
}                            
}

HTML
<table class="table table-bordered table-striped table-vcenter  table-responsive" id="investmentTableModal">

                                <thead id="invtableHead">
                                    <tr >

                                        <th class="d-sm-table-cell" style="width: 30%;">Repayment Amount</th>
                                        <td id="repayAmt"></td>
                                    </tr>
                                    <tr>
                                        <th class="d-sm-table-cell" style="width: 30%;">Description</th>
                                        <td id="description"></td>
                                    </tr>
                                    <tr>
                                        <th class="d-sm-table-cell" style="width: 30%;">Maturity Date</th>
<td id = "matureDate"></td>
                                    </tr>
</table>

我希望当用户点击 myInvestment.investmentNo[0] 时，只显示 myInvestment[0] 的还款金额、描述和到期日期

标签： javascripthtml

解决方案

这是很多意大利面条代码，所以我什至不打算尝试。

在 jQuery 中，人们通常做的是遍历数组并构造每个按钮，然后将每个按钮放在 dom 上。然后，他们$.click()在该按钮上应用 a，在.click回调中，他们可以在他们为其创建按钮的原始项目上创建一个 clojure。

像这样：https ://jsfiddle.net/0d8aL9xr/

var items = [{title: 'a bouncing ball', id: 1}, {title: 'a rubber duck', id: 2}];

items.forEach(item => {
  const $newButton = $(`<button>${item.title}</button>`);
  $('.buttons').append($newButton);
  $newButton.click(function() {
    $('#item-id').val(item.id);
    $('#item-name').val(item.title);
  })
})

推荐阅读