时间戳

首页 > 解决方案 > 如何从 html div 数组中获取特定值

javascript - 如何从 html div 数组中获取特定值

问题描述

我的应用程序调用了一个返回数组的 web api。我将其绑定到 html div。此 div 包含复选框、名称、年龄。

我的要求是获取选定对象的姓名和年龄值。

我想在不使用表格的情况下实现这一点

var parentDiv = document.getElementById('accountsList');

var htmlData = "";
for (var i = 0; i < result.Accounts.length; i++) {
  htmlData += '<div class="row" id="accountRow">';
  htmlData += '<div class="col-sm-4"> <input type="checkbox" onclick="calculateTotal(this)"><span>Select</span></div>';
  htmlData += '<div class="col-sm-4"> Name ' + result.Accounts[i].Name +  '</div>';
  htmlData += '<div class="col-sm-4"> Age' + result.Accounts[i].Age+  '</div>';
  htmlData += '</div><hr>'; 
}
parentDiv.innerHTML += htmlData;

我的要求是获取选定对象的姓名和年龄值。

标签： javascriptjqueryhtmlcssarrays

解决方案

var parentDiv = document.getElementById('accountsList');

const result = {
  Accounts: [
    {Name: 'Billy', Age: 10},
    {Name: 'Bob', Age: 20},
    {Name: 'Joe', Age: 30},
  ]
}

var htmlData = "";
for (var i = 0; i < result.Accounts.length; i++) {
  htmlData += `<div class="row" id="accountRow_${i}" data-name="${result.Accounts[i].Name}" data-age="${result.Accounts[i].Age}">`;
  htmlData += '<div class="col-sm-4"> <input type="checkbox" onclick="calculateTotal(this)"><span>Select</span></div>';
  htmlData += '<div class="col-sm-4"> Name: ' + result.Accounts[i].Name +  '</div>';
  htmlData += '<div class="col-sm-4"> Age: ' + result.Accounts[i].Age +  '</div>';
  htmlData += '</div><hr>'; 
}
parentDiv.innerHTML += htmlData;

function calculateTotal() {
  console.clear();
  [...document.querySelectorAll('[type=checkbox]:checked')].forEach(itm => {
    let row = itm.closest('.row')
    console.log('Name:', row.getAttribute('data-name'), 'Age:', row.getAttribute('data-age'))
  })
}
<div id="accountsList"></div>

推荐阅读