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

Question

My application calls a web api which returns an array. I am binding that to html div. This div contains checkbox, name, age.

My requirement is to get values of name and age for the selected.

I want to achieve this without using tables

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;

My requirement is to get values of name and age for the selected.

Answer 1

If the information that you need is this simple, I would then use data-* attributes. If it is more complex, the maybe find would be a better solution.

Since your data is so simple I used the data-* approach. Basically we save the data to the root element, then when we click on the checkbox we check it's parent for the data. We could have placed the data on the checkbox if we would have rather done that.

Next we use getAttribute(key) to the get attribute on the element.

 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>

Answer 2

One approach could be to use the index i to set the ids and then get the values of those ids.

For example

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, ' + i + ')"><span>Select</span></div>';
  htmlData += '<div class="col-sm-4" id="name' + i + '"> Name ' + result.Accounts[i].Name +  '</div>';
  htmlData += '<div class="col-sm-4"  id="age' + i + '"> Age' + result.Accounts[i].Age+  '</div>';
  htmlData += '</div><hr>'; 
}

Then, when clicking on the checkbox, trigger to which i it belongs.

var calculateTotal = (element, indexId) => {

    var name = $('#name' + indexId).value();
    var age = $('#age' + indexId).value();

... do your stuff here ...
}

Hope it helps!

Answer 3

 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>