td双击修改

最新推荐文章于 2023-03-28 14:24:57 发布

原创最新推荐文章于 2023-03-28 14:24:57 发布 · 253 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js

js 专栏收录该内容

61 篇文章

订阅专栏

本文介绍了如何使用HTML和CSS实现一个允许用户双击单元格修改分数的功能，着重于前端交互设计。通过JavaScript监听事件，用户可以方便地编辑表格中的得分项，实时更新数据。

html

 htmlList += '<td class="score_td" index_in="' + j + '" iindex_out="' + i + '">' + item.DeductPointList[j].Score + '</td>';

css

    //双击修改分数
    $(".score_td").dblclick(function () {
        var td = $(this);
        var j_ = td.attr('index_in');
        var i_ = td.attr('iindex_out');
        var text = td.text();
        var txt = $("<input type='text' class='text_score' οnkeyup='clearNoNum(this)'>").val(text); 
        td.text("");
        td.append(txt);
        txt.focus();
        txt.blur(function () {
            var newText = $(this).val();
            $(this).remove();
            td.text(newText);
            listOld[i_].DeductPointList[j_].Score = txt;
        });
    });