Question

我当前在页面上有两个表，现在可以将表1中的记录添加到表2中，但是我想添加条件以检查表2中是否已存在新记录。这是我的桌子：

style

这是我的JavaScript，用于添加新记录，并且需要在此处进行验证，以避免使用id作为其唯一值来重复：

 <div id="opTableDiv" class="tableFixHead" ; style="margin-top: 5px;">
        <table class="sortable" border="1" id="table1">
            <thead>
                <tr>
                    <th>ID Number</th>
                    <th>Name</th>
                </tr>
            </thead>
            <tbody>               
                <tr style="font-size:11px">
                </tr>                
            </tbody>
        </table>
    </div>



 <div id="NewTraining" style="display:none">        
        <div id="opTableDiv" class="tableFixHead">            
            <table class="sortable" border="1" id="table2">
                <thead>
                    <tr>
                        <th>ID Number</th>
                        <th>Name</th>
                        <th>Action</th>

                    </tr>
                </thead>
                <tbody>
                    <tr id="TrainTR" style="font-size:11px">
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

任何建议/评论TIA。

Answer 1

这可以通过以下方式实现：

首先迭代tr的{{1}}行元素，对于每次迭代
您检查当前行的table2单元格元素的innerHTML值以查看它们是否与您的输入参数匹配，并且，
如果检测到匹配项，则通过td语句提前退出AddRecord()函数

有许多方法可以实现。一种选择是使用return方法提取querySelector()元素进行迭代，并使用特定的tr元素进行比较，如下所示：

td

function AddRecord(that, id, name) {

  var table = document.getElementById("table2");

  /*
  Extract and iterate rows from tbody of table2
  */
  for(const tr of table.querySelectorAll("tbody tr")) {
     
    /*
    Extract first and second cell from this row
    */
    const td0 = tr.querySelector("td:nth-child(1)");
    const td1 = tr.querySelector("td:nth-child(2)");
    
    /*
    If this row has missing cells, skip it
    */
    if(!td0 || !td1) {
      continue;
    }
    
    /*
    Check if cells of existing tr row contain same contents
    as input arguments. Note also the use of == rather than 
    the use of === to allow type coercion when comparing 
    number id with string id.
    */
    if ((td0.innerHTML == id) && (td1.innerHTML == name)) {
      
      console.log(`Match found for ${id} and ${name}. Insert rejected`);
      return;
    }
  }  

  var row = table.insertRow(1);
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);

  cell1.innerHTML = id;
  cell2.innerHTML = name;
}

AddRecord('', 1, 'bob')
AddRecord('', 2, 'jon')
AddRecord('', 1, 'bob') // Should fail to insert
AddRecord('', 3, 'jon')
AddRecord('', 2, 'jon') // Should fail to insert

希望这会有所帮助！

Answer 2

我在click事件上附加了一个功能，可以向表中添加一行，其实现的一部分是这样的：

    var cartTotal = $('#cart_total').val();
    var cartDiscount = $('#cart_discount').val();
    var cartType = $('input[name="cart_type"]:checked').val();
    var cartTypeLabel = (
        cartType == 0 ? 'percentage' : 'fixed amount'
    );
    var duplicatedRow = false;

    $('#discount_rules_table tr').each(function (index, tr) {
        //if it is not the header row
        if(index!==0) {
            var tds = $(tr).find("td");
            if(duplicatedRow){
                return;
            } else {
                duplicatedRow = (
                    tds[0].innerHTML == cartTotal 
                    && tds[1].innerHTML == cartDiscount 
                    && tds[2].innerHTML.toLowerCase() == cartTypeLabel.toLowerCase()
                );
            }
        }
    });

    if(duplicatedRow) {
        return;
    }
    //...

使用上面的代码，我可以避免重复的行。

Javascript：捕获并防止HTML表中出现重复的行条目

2 个答案: