Question

目前，我有一个表格，我可以编辑一行并在完成编辑后保存。我希望能够添加验证，例如，如果电子邮件单元格不包含电子邮件，那么它将无法保存。如果单击“保存”并且尚未验证字段，我希望显示一个显示错误的对话框。我怎么能这样做？

这就是我需要的：

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>

Answer 1

我写了一些东西让你开始，你需要添加更多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);
        }
    }
});
});

编辑时在表内验证单元格

1 个答案: