Question

点击按钮后，我可以处理表格并从JS文件创建表格。

当我点击按钮时，它会从字典中获取数据并将其添加到表中。

所以我有一些位置，如果我将一个位置添加到表中，并且当我点击第二次时间时我又恢复了相同的位置，则其添加值+1进入了计数器。

var users = [{
  name: "Name1",
  id: "6183",
  position: "Shift Leader",
  cardId: "0"
}, {
  name: "Name2",
  id: "6686",
  position: "Master",
  cardId: "1"
}, {
  name: "Name3",
  id: "10526",
  position: "Operator",
  cardId: "2"
}, {
  name: "Name4",
  id: "10527",
  position: "Operator",
  cardId: "3"
}, {
  name: "Name5",
  id: "10433",
  position: "Qualiti inspector",
  cardId: "4"
}];

$('#plus-button').on('click', function() {
  filterUsers(users)
});

function filterUsers(userData) {
  var msg = window.prompt("Scan operato ID card", "");
  $.each(userData, function(i, data) {
    if (msg === data.cardId) {
      groupData(data);
    }
  });
}

function groupData(data) {
  var count = 0;

  $('.positionUsers').show();
  $(".positionUsers > tbody").append('<tr class="add"><td>' + data.position + '</td><td>' + count + '</td></tr>');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="plus-button">
  <p class="plus">+</p>
</button>
<table class="positionUsers hiden">
  <thead>
    <tr>
      <th colspan="3">
        Currently working at this station:
      </th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

因此，如果我在表“ Operator”中添加了addind之后，又添加了一个运算符，则计数为+1。

如果我添加相同的用户位置，则不允许添加到表格中。

因此，最后，当我单击加时，它会检查表上的所有数据，如果用户位置已在表中，则会将其添加到计数器+1

Answer 1

因此，首先您应该在需要存储计数器的地方有一个变量。有2种不同的方式。您可以使用属性count：0扩展初始用户数组，也可以使用该属性创建另一个数组。之后，我想提到的是，每次要更新值时都必须清空表。请尝试我的工作示例：

var users = [{
  name: "Name1",
  id: "6183",
  position: "Shift Leader",
  cardId: "0"
}, {
  name: "Name2",
  id: "6686",
  position: "Master",
  cardId: "1"
}, {
  name: "Name3",
  id: "10526",
  position: "Operator",
  cardId: "2"
}, {
  name: "Name4",
  id: "10527",
  position: "Operator",
  cardId: "3"
}, {
  name: "Name5",
  id: "10433",
  position: "Qualiti inspector",
  cardId: "4"
}];

var usersCount = users.reduce((accumulator, c) => {
	var a =	accumulator.filter(user => user.position === c.position);
	if(a.length > 0){
		a[0].cardIds.push(c.cardId);
	}else{
		accumulator.push({position: c.position, cardIds: [c.cardId], count: 0});
	}
	
	return accumulator;
}, []);
	
$('#plus-button').on('click', function() {
  const cardId = window.prompt("Scan operato ID card", "");
	const filteredUsers = usersCount.filter(user => user.cardIds.indexOf(cardId) !== -1);
	
	if(filteredUsers.length > 0){
		filteredUsers[0].count++;
		$(".positionUsers > tbody").empty();
		usersCount.filter(user => user.count > 0).forEach(user => {
			$(".positionUsers > tbody").append('<tr class="add"><td>' + user.position + '</td><td>' + user.count + '</td></tr>');
		});
		$('.positionUsers').show();
	}else{
	alert('This card id does not exists')
	}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="plus-button">
  <p class="plus">+</p>
</button>
<table class="positionUsers hiden">
  <thead>
    <tr>
      <th colspan="3">
        Currently working at this station:
      </th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

Answer 2

如果我正确地理解了您的问题，您可能会记得已经输入的ID，并将其保存在数组中，如下所示：

var users = [{
  name: "Name1",
  id: "6183",
  position: "Shift Leader",
  cardId: "0"
}, {
  name: "Name2",
  id: "6686",
  position: "Master",
  cardId: "1"
}, {
  name: "Name3",
  id: "10526",
  position: "Operator",
  cardId: "2"
}, {
  name: "Name4",
  id: "10527",
  position: "Operator",
  cardId: "3"
}, {
  name: "Name5",
  id: "10433",
  position: "Qualiti inspector",
  cardId: "4"
}];

var usedIds = [];

$('#plus-button').on('click', function() {
  filterUsers(users)
});

function filterUsers(userData) {
  var msg = window.prompt("Scan operato ID card", "");
  $.each(userData, function(i, data) {
    if (msg === data.cardId && usedIds.indexOf(msg) < 0) {
      usedIds.push(msg);
      groupData(data);
    } else if (msg === data.cardId) {
      var element = document.getElementById(data.position);
      var positionCount = parseInt(element.innerHTML);
      element.innerHTML = positionCount+1;
    }
  });
}

function groupData(data) {
  var count = 0;

  $('.positionUsers').show();
  $(".positionUsers > tbody").append('<tr class="add"><td>' + data.position + '</td><td id="'+data.position+'">' + count + '</td></tr>');
}

如果要增加计数器，还应该使用id或类从每一行中标识计数<td>。然后，您可以通过选择元素来增加计数器的数量。现在，我已经编辑了我的评论，如果该行存在，您可以算数。

将字典数组中的相同值添加到表中时，对其进行计数

2 个答案: