编辑时验证表格中的单元格答案

【问题标题】：Validating Cells Within a Table While Editing编辑时验证表格中的单元格
【发布时间】：2016-10-03 13:38:33
【问题描述】：

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

这是我需要的：

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>

【问题讨论】：

标签： javascript php html validation

【解决方案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);
        }
    }
});
});

【讨论】：

除非我需要添加一些东西，否则它在我的代码中似乎不适合我。
每当我运行它并且表格出现...如果我编辑买家 ID 使单元格为空白或有字母/单词，它仍然可以让我保存它
嗯，很有趣....我在帖子中添加了我的 jQuery 导入代码....这些看起来正确吗？
您可能有冲突 - 因为您使用 2 个 jQuery 文件（本地一个和 google 的一个），这是有原因的吗？
没有理由...让我拿出一个看看是否有效