編集中の表内のセルの妥当性検査

現在、編集を終えた後に行を編集して保存できる表があります。電子メールセルに電子メールが含まれていない場合は保存しないなど、検証を追加できるようにしたいと考えています。私は保存をクリックしてフィールドが検証されていない場合、エラーを表示するダイアログボックスを表示したいと思います。これどうやってするの？ここで編集中の表内のセルの妥当性検査

は、私は必要なものである：

Buyer ID - numbers only 
POC Name - text only 
POC Email - email only 
POC Phone - phone number only

相対Javascriptを：

$(document).ready(function() { 
    $('.edit').click(function() { 
     var $this = $(this); 
     var tds = $this.closest('tr').find('td').not('.mr_id').filter(function() { 
      return $(this).find('.edit').length === 0; 
     }); 
     if ($this.html() === 'Edit') { 
      $this.html('Save'); 
      tds.prop('contenteditable', true); 
     } else { 
      $this.html('Edit'); 
      tds.prop('contenteditable', false); 
     } 
    }); 
    });

相対HTML/PHP：

<?php 
    foreach ($dbh->query($sql) as $rows){ 
    ?> 
    <tr> 
     <td class="mr_id" contenteditable="false"><?php echo intval ($rows['MR_ID'])?></td> 
     <td class="mr_name" contenteditable="false"><?php echo $rows['MR_Name']?></td> 
     <td class="buyer_id" contenteditable="false"><?php echo $rows['Buyer_ID']?></td> 
     <td class="poc_n" contenteditable="false"><?php echo $rows['MR_POC_N']?></td>  
     <td class="poc_e" contenteditable="false"><?php echo $rows['MR_POC_E']?></td> 
     <td class="poc_p" contenteditable="false"><?php echo $rows['MR_POC_P']?></td> 
     <td><button class="edit" name="edit">Edit</button> 
     <button class="delRow" name="delete" onclick="deleteRow(this)">Delete</button></td> 
    </tr>

jQueryの輸入：

<head> 
     <title>Stage Rebate Master HTML Table</title> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
     <script src="jquery-1.12.4.min.js"></script> 
     <link rel="stylesheet" type="text/css" href="html_master.css"> 
     <script type="text/javascript" src="html_master.js"></script> 
</head>

出典

2016-10-03 Rataiczak24

私はあなたがより多くのswitch case条件を追加する（私はbuyer_idを扱っ）し、ダイアログボックスを追加する必要があります、あなたが始めるために少し気にいらを書いた（私は#myDialogBoxを使用）が、私はあなたは大丈夫だろうと思います:)

$(document).ready(function() { 
    $('.edit').click(function() { 
     var $this = $(this); 
     var tds = $this.closest('tr').find('td').not('.mr_id').filter(function() { 
     return $(this).find('.edit').length === 0; 
    }); 
    if ($this.html() === 'Edit') { 
     $this.html('Save'); 
     tds.prop('contenteditable', true); 
    } else { 
     var isValid = true; 
     var errors = ''; 
     $('#myDialogBox').empty(); 
     tds.each(function(){ 
      var type = $(this).attr('class'); 
      var value = $(this).text(); 
      switch(type){ 
       case "buyer_id": 
        if(!$.isNumeric(value)){ 
          isValid = false; 
         errors += "numbers only in buyer id\n"; 
         } 
        break; 
      } 
     }) 
     if(isValid){ 
      $this.html('Edit'); 
      tds.prop('contenteditable', false); 
     }else{ 
      alert(errors); 
     } 
    } 
}); 
});

出典

2016-10-03 13:48:39

追加する必要がある場合を除き、私のコードではうまくいかないようです。 – Rataiczak24

に間違いをしてもらえますか？ –

私はそれを実行し、テーブルが現れます...セルが空白または文字/単語があるようにバイヤーIDを編集すると、それでも私はそれを保存することができます – Rataiczak24

編集中の表内のセルの妥当性検査

答えて

関連する問題