Question

我相对较新。

我设法使表变为动态状态，单击后变为文本区域，失去焦点时又返回静态表单元格。

我想在这里做的是在每次失去焦点时发送值。它与Ajax一样，但是当失去控制时，单击的单元格中的值总是消失。它发生在任何单元格上。

这是我的代码。

HTML

<body>
<div class="container">
<br>
<h2>English lines are under here</h2>
<h5>Click each row to modify</h5>
<br>
<table id="btable" class="bg-light table table-hover">
    <th class= "text-center">No</th>
    <th class= "text-center">Word</th>
    <th class= "text-center">Dialogue</th>
    <th class= "text-center">Practice</th>
    <c:forEach items="${list}" var="engboardVO">
    <tr>
        <td class="bid" data-name="bid">${engboardVO.bid}</td>
        <td class="word" data-name="word" data-editable>${engboardVO.word}</td>
        <td class="dialogue" data-name="dialogue" data-editable>${engboardVO.dialogue}</td>
        <td class="practice" data-name="practice" data-editable>${engboardVO.practice}</td>
    </tr>
    </c:forEach>
</table>

脚本

$("table").on("click", "[data-editable]", function(){
    var $el = $(this);
    var str = $el.text();
    console.log(str);
    var $input = $('<textarea rows=5 style="width:500px"/>').val( str );
    $el.html($input);
    $input.focus();
    var field_name = $el.attr('data-name');
    var save = function(bid, newWord, newDialogue, newPractice){
        var $td = $input.val();
        $.ajax({
            type : "POST",
            url : "/tight",
            data : JSON.stringify({
                bid : bid,
                word : newWord,
                dialogue : newDialogue,
                practice : newPractice
            }),
            dataType: "json",
            success : function(msg){
                if (msg["status"] == 'success'){
                    $input.replaceWith($td);
                } else {
                    alert("Fail");
                    $input.replaceWith($el);
                }
            },
            error : function(msg) {
                alert("ajax fail to get data from server");
            }
        });
    };
    $($input).blur(function(){
        var bid = $(this).closest('tr').find('td.bid').text();
        var newWord = $(this).closest('tr').find('td.word').text();
        var newDialogue = $(this).closest('tr').find('td.dialogue').text();
        var newPractice = $(this).closest('tr').find('td.practice').text();
        console.log(newPractice);
        save(bid, newWord, newDialogue, newPractice)
    })
});

Answer 1

我们不能在输入和文本区域上使用.text()，在这种情况下，我们将不得不使用函数.val()。

我注意到您存储了字段名，但从未使用过它，因此在尝试获取处于编辑模式下的字段的值时会很方便。

下面是一个有效的代码段

$("table").on("click", "[data-editable]", function(){
    var $el = $(this);
    if ($el.find("textarea").length)
      return;
    var str = $el.text();
    console.log(str);
    var $input = $('<textarea rows=5 style="width:500px"/>').val( str );
    $el.html($input);
    $input.focus();
    var field_name = $el.attr('data-name');
    var save = function(bid, newWord, newDialogue, newPractice){
        var $td = $input.val();
        $input.replaceWith($td);
        alert("saving bid: " + bid + ", newWord: " + newWord + ", newDialougue: " + newDialogue + ", newPractice: " + newPractice);
    };
    $($input).blur(function(){
        var row = $(this).closest('tr');
        var bid = row.find('td.bid').text();
        var newWord = field_name == "word" ? row.find("td.word textarea").val() : row.find('td.word').text();
        var newDialogue = field_name == "dialogue" ? row.find("td.dialogue textarea").val() : row.find('td.dialogue').text();
        var newPractice = field_name == "practice" ? row.find("td.practice textarea").val() : row.find('td.practice').text(); 
        save(bid, newWord, newDialogue, newPractice)
    })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="btable" class="bg-light table table-hover">
    <th class= "text-center">No</th>
    <th class= "text-center">Word</th>
    <th class= "text-center">Dialogue</th>
    <th class= "text-center">Practice</th>
    <tr>
        <td class="bid" data-name="bid">100</td>
        <td class="word" data-name="word" data-editable>word 1</td>
        <td class="dialogue" data-name="dialogue" data-editable>dialogue 1</td>
        <td class="practice" data-name="practice" data-editable>practice 1</td>
    </tr>
    <tr>
        <td class="bid" data-name="bid">200</td>
        <td class="word" data-name="word" data-editable>word 2</td>
        <td class="dialogue" data-name="dialogue" data-editable>dialogue 2</td>
        <td class="practice" data-name="practice" data-editable>practice 2</td>
    </tr>
</table>

如何跟踪实时输入值以提交给服务器？

1 个答案: