Question

我正在尝试使用数据透视表来编辑数据而不刷新，但是当双击该行时没有任何反应，请遵循JQuery代码

$(document).ready(function(){
    $('#tblEditavel tbody tr td.editavel').dblclick(function(){
        if($('td > input').length > 0){
            return;
        }
        var conteudoOriginal = $(this).text();
        var novoElemento = $('<input/>', {type: 'text', value:conteudoOriginal});

        $(this).html(novoElemento.bind('blur keydown', function(e){
            var keyCode = e.which;
            var conteudoNovo = $(this).val();
            if(keyCode == 13 && conteudoNovo != '' && conteudoNovo != conteudoOriginal){
                var objeto = $(this);
                $.ajax({
                    type:"POST",
                    url:"alterar.php",
                    data: {
                        id:$(this).parents('tr').children().first().text(),
                        campo:$(this).parent().attr('title'),
                        valor:conteudoNovo
                    }
                    success:function(result){
                        objeto.parent().html(conteudoNovo);
                        $('body').append(result);
                    }
                })
            }
            else if( keyCode == 27 || e.type == 'blur') {
                $(this).parent().html(conteudoOriginal);
            }
        }));
        $(this).children().select();
    }    
})})

简单表HTML的代码

<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script type="text/javascript" src="atualiza.js"></script>
    <style>
        table{
            border-collapse: collapse;
        }
        table, td, th{
            border: 1px solid black;
            padding: 5px;

        }
    </style>
</head>
<body>
    <table id="tblEditavel">
        <thead>
            <tr>
                <th>Id</th>
                <th>Nome</th>
                <th>Valor</th>
                <th>Vencimento</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>74</td>
                <td title="Nome" class="editavel">Fatura 45 Jhovini</td>
                <td title="valor" class="editavel">2.350,00</td>
                <td title="vencimento" class="editavel">10/02/2017</td>
            </tr>

        </tbody>
    </table>

</body>

在代码工作之前，但是在放入ajax后，双击不起作用，我做错了什么？

Answer 1

您在, succes AJAX之前错过了}，$(this).children().select();之后您还有一个额外的结束$(document).ready(function() { $('#tblEditavel tbody tr td.editavel').dblclick(function() { if ($('td > input').length > 0) { return; } var conteudoOriginal = $(this).text(); var novoElemento = $('<input/>', { type: 'text', value: conteudoOriginal }); $(this).html(novoElemento.bind('blur keydown', function(e) { var keyCode = e.which; var conteudoNovo = $(this).val(); if (keyCode == 13 && conteudoNovo != '' && conteudoNovo != conteudoOriginal) { var objeto = $(this); $.ajax({ type: "POST", url: "alterar.php", data: { id: $(this).parents('tr').children().first().text(), campo: $(this).parent().attr('title'), valor: conteudoNovo }, //added this comma here success: function(result) { objeto.parent().html(conteudoNovo); $('body').append(result); } }) } else if (keyCode == 27 || e.type == 'blur'){ $(this).parent().html(conteudoOriginal); } })); $(this).children().select(); //} removed the extra } from here. }); })。请参阅工作代码段：

＆＃13;

table {
  border-collapse: collapse;
}
table,
td,
th {
  border: 1px solid black;
  padding: 5px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tblEditavel">
  <thead>
    <tr>
      <th>Id</th>
      <th>Nome</th>
      <th>Valor</th>
      <th>Vencimento</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>74</td>
      <td title="Nome" class="editavel">Fatura 45 Jhovini</td>
      <td title="valor" class="editavel">2.350,00</td>
      <td title="vencimento" class="editavel">10/02/2017</td>
    </tr>

  </tbody>
</table>

＆＃13;

class InfoClass
{
    public string source;
    public InfoItem tests { get; set; }
    public InfoItem serverBuild { get; set; }
    public InfoItem localBuild { get; set; }
    public InfoItem installedBuild { get; set; }

    public void pull()
    {
        InfoClass newInfo = JsonConvert.DeserializeObject<InfoClass>(File.ReadAllText(this.source));
        this.tests = newInfo.tests;
        this.serverBuild = newInfo.serverBuild;
        this.localBuild = newInfo.localBuild;
        this.installedBuild = newInfo.installedBuild;
    }
    public void push()
    {
        File.WriteAllText(this.source, JsonConvert.SerializeObject(this));
    }
}

public class InfoItem
{
    public string version { get; set; }
    public string status { get; set; }
    public string updated { get; set; }
}

＆＃13;

关于JQuery和html的可编辑表？

1 个答案: