使用javascript将两个值与动态行进行比较

Question

我有一个包含两个值的多行的html代码。使用javascript，我只能比较一行中的两个值。如何对动态生成的行执行相同的操作。

HTML：

<tbody id="appendrow" class="appendrow">
  <input type="text" 
         data-field="quantity" 
         required 
         class="form-control" 
         name="units_ordered[]"
         id="units_ordered0" 
         value=""/>

  <input type="text" 
         data-field="inventory"  
         class="form-control" 
         name="inventory" 
         id="inventory0" 
         value="" />
</tbody>

使用Javascript：

var counter = 1;

$(window).load(function () {
  $(function () {

    $('#addRow').click(function () {
      var row = $(' <tbody id=\'appendrow\' class=\'appendrow\'><tr><td> <input type=\'text\'  required class=\'form-control\' name=\'sku[]\' onclick=\'filtersku(this,' + counter + ');\'> <input type=\'hidden\' id=\'product_id' + counter + '\' name=\'product_id[]\'/></td> <td> <input type=\'text\' readonly data-field=\'vendorsku\' id=\'vendor_sku' + counter + '\' name=\'vendorsku[]\'class=\'form-control\'></td> <td><input class=\'form-control\' data-field=\'quantity\' type=\'text\' required id=units_ordered' + counter + '\' name=\'units_ordered[]\' /></td> <td><input class=\'form-control\' type=\'text\' data-field=\'price\' required name=\'vendor_unit_price[]\' id=\'vendor_price' + counter + '\'></td> <td><input name=\'discount_percent[]\' data-field=\'discount\'  class=\'form-control\' ><input type=\'hidden\'  data-field=\'discountnumber\' class=\'form-control\' id=\'discountnumber\' ></td><td><input type=\'text\'  readonly data-field=\'tax\' id=\'tax_id' + counter + '\' class=\'form-control\'  name=\'tax_id[]\' /></td><td> Rs. <span data-field=\'taxPrice\' id=\'taxPrice' + counter + '\' >0</span><input type=\'hidden\' data-field=\'taxPriceInput\' id=\'taxPriceInput' + counter + '\' class=\'taxPrice\' value = \'0\'/> </td> <td><input type=\'text\'  class=\'form-control\'data-field=\'total\' name=\'subtotal[]\'/><input type=\'hidden\' data-field=\'totalbeforetax\'  class=\'form-control\'  id=\'subtotalbeforetax\' /></td><td><button type=\'button\' class=\'btn btn-danger\' name=\'delete[]\' onclick=\'javascript:deletefun(this);\'><i class=\'fa fa-trash\' aria-hidden=\'true\'></i></button></td></tr></tbody>');
      $('#example').append(row);
      counter++;

    });
  });
});

function validation() {
  var ordered = parseInt(document.getElementById('units_ordered0').value);
  var inventory = parseInt(document.getElementById('inventory0').value);
  if (inventory == -1) {
    return true;
  }
  else {
    if (ordered <= inventory) {
      return true;
    }
    else {
      document.getElementById('error').innerHTML = ('Ordered units of a product cannot be greater than the number of products present in inventory whose value is ' + inventory).fontcolor('red');
      return false;
    }
  }
}

Answer 1

请注意HTML5表的正确结构。这是一个干净的HTML5表结构：

<table>
    <caption>Table Caption</caption>
    <colgroup>
        <col>
        <col>
    </colgroup>
    <thead>
        <tr>
            <th>Header Row 1</th>
            <th>Header Row 2</th>
            <th>Header Row 3</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td>Footer Row 1</td>
            <td>Footer Row 2</td>
            <td>Footer Row 3</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>Body Row 1</td>
            <td>Body Row 2</td>
            <td>Body Row 3</td>
        </tr>
    </tbody>
</table>

关于你的问题：

＆＃13;

＆＃13;

var counter = 1;

document.getElementById( 'addRow' ).addEventListener( 'click', function ( e ) {
    var table = document.getElementById( 'myTable' ),
        row = table.insertRow( counter ),
        cell1 = row.insertCell( 0 ),
        cell2 = row.insertCell( 1 );

    cell1.innerHTML = '<input type="text" data-field="quantity" class="form-control" name="units_ordered[]" id="units_ordered' + counter + '" required/>';
    cell2.innerHTML = '<input type="text" data-field="inventory" class="form-control" name="inventory" id="inventory' + counter + '"/>';
    counter++;
    e.preventDefault()
} )

document.getElementById( 'validate' ).addEventListener( 'click', function ( e ) {
    validation();
    e.preventDefault()
} )

function validation() {
    var ordered = document.querySelectorAll( 'input[id^="units_ordered"]' ),
        inventory = document.querySelectorAll( 'input[id^="inventory"]' );

    document.getElementById( 'error' ).innerHTML = ''

    ordered.forEach( function ( item, index ) {
        var ordered_val = Number( item.value ) || 0,
            inventory_val = Number( inventory[ index ].value ) || 0

        if ( inventory_val == -1 ) {
            return true
        } else {
            if ( ordered_val <= inventory_val ) {
                return true
            } else {
                document.getElementById( 'error' ).innerHTML += 'Row ' + +( index + 1 ) + ': Ordered units of a product cannot be greater than the number of products present in inventory whose value is ' + inventory_val + '<br/>';
                return false
            }
        }
    } )
}

＆＃13;

table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 300px
}
td, th {
    border: 1px solid #86af49;
    text-align: left;
    padding: 0
}
th {
    padding: 5px;
    color: #fff;
    background-color: #86af49
}
input[type="text"] {
    box-sizing: border-box;
    width: 100%;
    border: 0;
    outline: none
}
#error {
    color: red;
    font-size: .75em
}

＆＃13;

<p>
    <button type="button" id="addRow">Add Row</button>
    <button type="button" id="validate">Validation</button>
</p>

<table id="myTable">
    <thead>
        <tr>
            <th>Ordered</th>
            <th>Inventory</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <input type="text" data-field="quantity" class="form-control" name="units_ordered[]" id="units_ordered0" required/>
            </td>
            <td>
                <input type="text" data-field="inventory" class="form-control" name="inventory" id="inventory0"/>
            </td>
        </tr>
    </tbody>
</table>

<p id="error"></p>

＆＃13;

＆＃13;

＆＃13;