javascript - 从 HTML 表中提取值并将其放入数据库

Question

我正在开发一个网站，该网站从数据库表中提取信息并将其放入 HTML 表中。我使用 Jquery 单击功能和 contenteditable 使表格单元格在单击时可编辑。我试图找出将编辑后的值推回数据库的最佳方法。数据库的每一行都有一个唯一的日期，因此我的想法是使用它作为搜索参数来查找正确的数据库条目，并与列号配对。我试图使用 $(this).bind('input propertychange', function() { ，然后在 contenteditable 之后使用 ajax ，但被告知将函数放在函数内部是一个坏主意，所以我希望其他人可以帮助我想出更好的主意。这是该表的一个快速工作示例，可以为那些尝试帮助我的人节省一些时间。提前感谢各位的帮助!!

            $('td').click(function(){
                var val=($(this).siblings().first().text());
                var col = $(this).parent().children().index($(this));
                $(this).prop('contenteditable', true);
                //var row = $(this).parent().parent().children().index($(this).parent());
                //alert('Date: ' + val + ', Column: ' + col);
            });

            table,th, td {
                border: 1px solid black;
                border-collapse: collapse;
                font-size: 90%;
            }
            th, td {
                padding:8px;
            }
            td {
                text-align: center;
            }
            table {
                margin:0 auto;
            }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table><tr><th></th><th>22oz Dark</th><th>12ct 4oz Dark</th></tr><tr><th>2016-01-01</th><td>9785</td><td>2478</td></tr><tr><th>2016-01-02</th><td>8754</td><td>2136</td></tr><tr><th>2016-01-03</th><td>13587</td><td>2203</td></tr><tr><th>2016-01-04</th><td>14111</td><td>3297</td></tr><tr><th>2016-01-05</th><td>13212</td><td>3101</td></tr><tr><th>2016-01-06</th><td>16335</td><td>3299</td></tr><tr><th>2016-01-07</th><td>15421</td><td>3100</td></tr></table>

Answer 1

我想继续为 future 的读者发布我遇到的问题的解决方案。我没有尝试使用bind，而是使用了keyup(我一开始并不知道keyup ment key release)。因此，使用以下代码，我现在可以完全执行我发布此问题时想要执行的操作:

$(this).keyup(function() {

                    //keyup means when a key is released

                    $.ajax({
                      method: "POST",
                      url: "updatedatabase.php",
                      data: { content: $(this).text() }
                    })
                      .done(function( msg ) {
                        alert( "Data Saved: " + msg );
                    });

                 });
            });