为各种div容器添加计数器

问题描述 投票:0回答:1

首先,我知道这个标题有点令人困惑,但是我将解释我想做什么。

我创建了一个简单的.html和.js文件,该文件具有不同的div标签。我使用for循环循环了div标签,并且div容器的文本应添加到我创建的表中。

<HTML>
  <head>

  </head>
  <body>  
    <div id="divContainer">
      <div class="div">
        one
      </div>
      <div class="div">
        two
      </div>
      <div class="div">
        three
      </div>
      <div class="div">
        four
      </div>
      <div class="div">
        five
      </div>
      <div class="div">
        six
      </div>
    </div>


    <table id="table">

    </table>

    <p id="output">

    </p>
  </body>
</HTML>

JavaScript文件:

var divLists = document.getElementsByClassName('div');

window.onload = function() {
  for (i = 0; i < divLists.length; i++) {

    var divList = divLists[i];

    divList.onclick = function() {
      x(this.innerHTML);
    }
  }
};

function x(y) {
  var table = document.getElementById('table');
  var Row = table.insertRow();
  var Cell = Row.insertCell(0);
  var newText = document.createTextNode(y);
  Cell.appendChild(newText);
}

我也将代码放在jsfiddle中:https://jsfiddle.net/avj4zg21/11/

因此,通过单击“一个”,“两个”,“三个”,...,它将被添加到表中,但它想要添加一个计数器。因此,例如,如果我单击一个,则应将其添加到表格中;如果单击第二或第三次,则该名称后面应有一个计数器,例如:“一个(按3次)”。

提前谢谢您

javascript html for-loop counter
1个回答
0
投票

您可以使用Map跟踪单击的项目并增加现有的项目:

var divLists = document.getElementsByClassName('div');

window.onload = function() {
  for (i = 0; i < divLists.length; i++) {

    var divList = divLists[i];

    divList.onclick = function() {
      x(this.innerHTML);
    }
  }
};

let map = {};

function checkNumber(number){
     if(map[number])
          map[number] = map[number] + 1;
     else
          map[number] = 1;
     return map[number];
}

function x(y) {
  var table = document.getElementById('table');
  let rows = table.rows;
  let count = checkNumber(y);
  var Row = table.insertRow();
  var Cell = Row.insertCell(0);
  Cell.innerHTML = count;
  Cell = Row.insertCell(0);
  Cell.innerHTML = y;
}
<HTML>
  <head>
  
  </head>
  <body>  
    <div id="divContainer">
      <div class="div">
        one
      </div>
      <div class="div">
        two
      </div>
      <div class="div">
        three
      </div>
      <div class="div">
        four
      </div>
      <div class="div">
        five
      </div>
      <div class="div">
        six
      </div>
    </div>


    <table id="table">

    </table>
    
    <p id="output">
    
    </p>
  </body>
</HTML>
© www.soinside.com 2019 - 2024. All rights reserved.