如何檢查每行和每列中的html表格單元格值-有解無憂

我想在我的腳本中進行驗證。用戶只需要輸入唯一的字串才能插入到 html 表中。當用戶輸入并單擊提交時，腳本應檢查現有 html 表的單元格值，然后與用戶輸入進行比較。如果用戶輸入是唯一的，它將插入到 html 表中。但是如果用戶輸入不是唯一的，則會提示彈出警告訊息existed。那么如何檢查表格單元格值的每一列和每一行呢？

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<input type='text' id='field1' />
<input type='text' id='field2' />
<input type='text' id='field3' />
<button id='add' >Add </button>


<table id='table'>
<tr>
  <th>Field 1 </th>
  <th>Field 2 </th>
  <th>Field 3 </th>
</tr>

</table>

$(function(){
  
  $('#add').on('click',function(){
      
      var field1=$('#field1').val();
      var field2=$('#field2').val();
      var field3=$('#field3').val();
      
      var data=`<tr><td>` field1 `</td>` 
                      `<td>` field2 `</td>` 
                      `<td>` field3 `</td></tr>`;
      $('#table').append(data);
      
    });


});

uj5u.com熱心網友回復：

這是一個方法的例子。

var m = $('#table td').filter(function() {
  return $(this).text() == field1 || $(this).text() == field3 || $(this).text() == field3
})

現在你可以檢查是否m.length等于0if so 那么這些詞是唯一的。

演示

顯示代碼片段

$(function() {

  $('#add').on('click', function() {

    var field1 = $('#field1').val();
    var field2 = $('#field2').val();
    var field3 = $('#field3').val();

    var okay = true;

    var data = `<tr><td>`   field1   `</td>`  
      `<td>`   field2   `</td>`  
      `<td>`   field3   `</td></tr>`;


    var m = $('#table td').filter(function() {
      return $(this).text() == field1 || $(this).text() == field3 || $(this).text() == field3
    })

    if (m.length == 0) {
      $('#table').append(data);
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type='text' id='field1' />
<input type='text' id='field2' />
<input type='text' id='field3' />
<button id='add'>Add </button>


<table id='table'>
  <tr>
    <th>Field 1 </th>
    <th>Field 2 </th>
    <th>Field 3 </th>
  </tr>

</table>

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/322234.html

標籤：html 查询

上一篇：輸入滑塊后面的CSS條形音箱

下一篇：從表單中的兩個輸入在javascript中添加兩個數字