如何使用 JQuery 仅更改表的 td 内的文本

Posted 2023-02-24

【中文标题】如何使用 JQuery 仅更改表的 td 内的文本

【英文标题】：How to change only text inside td of table table using JQuery

【发布时间】：2017-03-15 21:40:15

【问题描述】：

我正在尝试更新包含输入框的单元格内的文本。 在$(ib).closest('td').prop('textContent',888); 行中，我将值 888 分配给文本，但这导致单元格的文本分配给“888”，但也出于某种原因删除了输入框。

我的代码（Django 模板）：

% extends "base.html" %
% block head_scripts %
<script type="text/javascript" src="/static/script/api_recs.js"></script>
<script type="text/javascript" src="/static/script/site_filter.js"></script>

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.2.2/css/buttons.dataTables.min.css"/>

<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.2.2/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.html5.min.js"></script>

% endblock %

% block title %
Schedule Match
% endblock %

% block styles %
<style type="text/css">
    tfoot 
        display: table-header-group;
    

</style>
% endblock %

% block content %

<table id='pm_table' class="display" cellspacing="0" >
    <thead>
        <tr>
            % for col_name in table_headers%
            <th>col_name</th>
            % endfor %
        </tr>
    </thead>
    <tfoot>
        <tr>
            % for col_name in table_headers%
            <th>col_name</th>
            % endfor %
        </tr>
    </tfoot>
    <tbody>
        % for data_row in table_data%
        <tr>
            % for item in data_row%
            <td>item</td>
            % endfor%
        </tr>
        % endfor %
    </tbody>
</table>

<script>
$(document).ready(function() 
    var SITE_ID_COL = 0;
    var PRIORITY_COL = 3;
    var IS_SCHEDULED_COL = 4;

    // priority input box
    $("#pm_table td:nth-child(" + PRIORITY_COL + ")").each(function() 

        // $(this).children().css('visibility', 'hidden');
        $(this).css('text-align', 'center');
        // $(this).css('font-size', 0);

        var $input_box = $('<input type="text" class="priority_changed" />')
        $input_box.prop('value', $(this).text());
        $input_box.prop('size', 1);
        $input_box.css('text-align', 'center');
        $input_box.prependTo(this);
    );
    // remember old value of input box
    $("#pm_table td:nth-child(" + PRIORITY_COL + ")").on('focus', '.priority_changed', function() 
        this.old_val = this.value;

    );
    // priority input box listener
    $('#pm_table').on('change', '.priority_changed', function() 
        var $changed_tr = $(this).closest('td').closest('tr');
        var site_id = $changed_tr.children().eq(SITE_ID_COL).text();
        var old_val = parseInt($(this).closest('td').text());
        var ib = this;

        // confirm change
        if (!confirm('Change priority for site ' + site_id + ' from ' + this.old_val + ' to ' + this.value + " ?")) 
            //revert input box value
            $(this).prop('value', this.old_val);
         else 
            // make the change in db
            new_val = this.value;
            var url = '/api/manage/schedule_match/set_priority/' + site_id + '/' + new_val + '/';

            $.ajax(
                type: 'POST',
                url: url,
                success: function(result) 
                    res = JSON.parse(result) // todo read res
                    alert('SUCCESSFULLY changed priority for site ' + site_id + ' from ' + ib.old_val + ' to ' + res.new_val + ".");
                    $(ib).closest('td').prop('textContent',888);



                ,
                error: function() 
                    alert('ERROR updating database!');
                    //revert input box state
                    $(ib).prop('value', ib.old_val);
                ,
            );
        
    );      
</script>
% endblock %

我尝试了$(ib).closest('td').text(888); 和许多不同的属性，如innerText、innerHtml、$(ib).closest('td').childNodes[1].prop('text',888)，但没有找到正确的方向。 我在这里做错了什么？

【问题讨论】：

为什么不使用text()？

$(ib).closest('td').childNodes[1].prop('text',888); 只会给你一个错误。

抱歉，更新了问题

@GillesC 拥有它的权利。事实上，您已经使用text() 从td 中为old_val 获取数据。您还应该考虑使用更短的方法更改所有 prop 调用，例如 val() 而不是 prop('value, )

$(ib).closest('td').text(888);导致相同的结果（删除这个td的输入框）

【参考方案1】：

您应该将模板更改为在td 中包含span。喜欢：

<tbody>
    % for data_row in table_data%
    <tr>
        % for item in data_row%
        <td><span>item</span></td>
        % endfor%
    </tr>
    % endfor %
</tbody>

那么你可以使用$(ib).closest('td').children('span').text(888)来改变文字而不删除输入框。

【讨论】：

我正要建议哈哈。 HTML 元素操作的正常标准是分离内容的责任。