在编辑时在表格中验证单元格

目前，我有一张表格，可以在完成编辑后编辑一行并保存它。我希望能够添加验证，例如，如果电子邮件单元格不包含电子邮件，则不会保存。我想要显示一个对话框，显示错误如果你点击保存并且一个字段没有被验证。我怎样才能做到这一点？在编辑时在表格中验证单元格

以下是我需要：

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

在编辑时在表格中验证单元格

回答

相关问题