遍历表的特定列

Loop through my table's specific column

本文关键字：遍历      更新时间：2023-09-26

html

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

爪哇语

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"列并检查是否有任何重复项。如果没有任何重复项，则产品 ID 的数量将为 1。

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

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

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

你的意思是这样吗？

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>

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

该函数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>

相关文章：