循环遍历我的表的特定列

Question

html

<table id="myList">
           <thead>
               <tr>
                   <td>Product ID</td>
                   <td>Product Name</td>
                   <td>Quantity</td>
               </tr>
           </thead>
           <tbody>

           </tbody>
       </table>

Javascript

var tableRef = document.getElementById("myList").getElementsByTagName("tbody")[0];

       var newRow = tableRef.insertRow(tableRef.rows.length);

       var newCell = newRow.insertCell(0);

       var otherCell = newRow.insertCell(2);

       var check;
       var myText = result.text;
       var myTextTwo =  myText.replace(/['"]+/g, '');
       alert(myTextTwo);

       for (var i = 0; i < tableRef.rows.length; i++) {

           if (myTextTwo != tableRef.rows[i].cells[0].innerHTML) {
               check = true
           }
           else if (myTextTwo == tableRef.rows[i].cells[0].innerHTML) {
               tableRef.rows[i].cells[2].innerHTML += 1;
               check = false;
               break;
           }
       }

       if (check) {
           var newText = document.createTextNode(myTextTwo);
           var otherText = document.createTextNode("1");
           newCell.appendChild(newText);
           otherCell.appendChild(otherText);
       }
       else {
           alert("You have scanned this item before.");
       }

我所做的是扫描包含产品 ID（例如“123”）的 QR，并将产品 ID 插入名为“产品 ID”的列中，我能够做到这一点。

但是，我现在要做的是，如果用户扫描包含相同产品 ID（例如“123”）的二维码，我的代码将能够检测到重复并添加到数量上。

所以我计划做的是遍历“产品 ID”列并检查是否有任何重复。如果没有任何重复，则 Product ID 的 Quantity 将为 1。

Product ID | Product Name | Quantity
  123      |   Hello      |     1

否则存在重复，数量为2。

Product ID | Product Name | Quantity
  123      |   Hello      |     2

Answer 1

你的意思是这样的吗？

var tableRef = document.getElementById("myList").getElementsByTagName("tbody")[0];

// save the row number of the existing product
var found = false;
var myText = result.text;
var myTextTwo = myText.replace(/['"]+/g, '');

// search the table for the existing product
for (var i = 0; i < tableRef.rows.length && !found; ++i) {
  // if you found it then
  if (tableRef.rows[i].cells[0].innerHTML == myTextTwo) {
    // update the value
    tableRef.rows[i].cells[2].innerHTML += 1;

    // and say we found it
    found = true;
  }
}

// at this point, if we didn't find anything then add a new row
if (!found) {
  var newRow = tableRef.insertRow(tableRef.rows.length);
  newRow.insertCell(0).innerText = "...";
  newRow.insertCell(0).innerText = "...";
  newRow.insertCell(0).innerText = 1;
}

<table id="myList">
  <thead>
    <tr>
      <td>Product ID</td>
      <td>Product Name</td>
      <td>Quantity</td>
    </tr>
  </thead>
  <tbody>

  </tbody>
</table>

Answer 2

我认为这可能会有所帮助：

函数duplicateCell 返回给定列中包含重复项的行号，如果没有找到重复项，则返回null。

函数addOne需要一个产品ID来检查重复项，一个产品名称（如果没有找到重复项，产品将需要一个名称，否则将被忽略），它还需要知道要处理哪个表.
AddOne 使用上述函数查找重复项并将数量加一。

我从 1 辆汽车 1 辆自行车和 1 个滑板开始，添加了 2 辆自行车 (id2) 并添加了 2 枚火箭 (id 4)。

var duplicateCell = function(tableId, columnNumber, stringToSearch) {
	var myTbody = document.getElementById(tableId).getElementsByTagName("tbody")[0];
	var tableRows = myTbody.rows.length;
	for (var i = 0; i < tableRows; i++) {
		if (myTbody.rows[i].cells[columnNumber].innerHTML.trim() == stringToSearch)
			return i
	}
	return null;
}

function addOne(productId, productName, tableId) {
	var myTbody = document.getElementById(tableId).getElementsByTagName("tbody")[0];
	var rowIndex = duplicateCell(tableId, 0, productId)
	if (rowIndex != null) {
		myTbody.rows[rowIndex].cells[2].innerHTML = +myTbody.rows[rowIndex].cells[2].innerHTML.trim() + 1;
	} else {
	var tableRows = myTbody.rows.length;
		var row = document.getElementById(tableId).insertRow();
		c1 = row.insertCell(0);
		c2 = row.insertCell(1);
		c3 = row.insertCell(2);
		c1.innerHTML = productId;
		c2.innerHTML = productName;
		c3.innerHTML = 1;
	}
}
addOne("4", "Rocket", "myList")
addOne("4", "Rocket", "myList")
addOne("2", " ", "myList")

<table id="myList">
	<thead>
		<tr>
			<td>Product ID</td>
			<td>Product Name</td>
			<td>Quantity</td>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>1 </td>
			<td>Car </td>
			<td>1 </td>
		</tr>
		<tr>
			<td>2 </td>
			<td>Bike </td>
			<td>1 </td>
		</tr>
		<tr>
			<td>3 </td>
			<td>Skateboard </td>
			<td>1 </td>
		</tr>
	</tbody>
</table>