时间戳

首页 > 解决方案 > 使用jquery单击它时更改td元素的文本

javascript - 使用jquery单击它时更改td元素的文本

问题描述

我在输出中获取 Json 数据并使用编辑选项附加到表中，所以我想要的是当单击 td 的编辑然后单击 td 元素文本应该从“编辑”更改为“保存”，然后再次单击“保存”它更改为编辑，但有时一个 td 元素应从 'Edit' 更改为 'Save' 一次只有一个 'Save' 应该处于活动状态，其他元素保持 'Edit' 。

<table class="append_data">
    <tr>
        <th>Company</th>
        <th>Contact</th>
        <th>Country</th>
        <th>Action</th>
    </tr>
</table>

//获取数据的脚本：

$.ajax({
            url: "<?= base_url('controller/get_users') ?>",
            type: 'POST',
            data: {
            },
            success: function (myJSON) {
                var output = myJSON;  
                var html = '';
                $.each(output, function (key, value) {
                    html += '<tr>';
                    html += '<td>' + value.name + '</td>';
                    html += '<td>' + value.mobile + '</td>';
                    html += '<td>' + value.id + '</td>';
                    html += '<td><a href="javascript:void(0);" style="text-decoration:none;" class="edit_user" data-id="' + value.id + '"><span class="change_res' + value.id + '">Edit</span></a></td>';
                    html += '</tr>';
                });
                $('.append_data tbody').append(html);
                      },
            error: function (xhr) {
                alert(xhr.status);
            }
        });

//改变文本的脚本

 $("body").on('click', '.edit_user', function () {
        var userid = $(this).attr("data-id");
        $(this).text('Save').siblings().text('Edit');

    });

获取输出：

预期输出：

标签： javascriptjqueryhtml

解决方案

你可以试试

$("body").on('click', '.edit_user', function () {
     var userid = $(this).attr("data-id");
     $('.edit_user').not(this).text('Edit');  // back all the edit_user to Edit but not this
     $(this).text(($(this).text().trim() == 'Save') ? 'Edit' : 'Save'); // change the text for this between Edit or Save
});

说明：

  • $('.edit_user').not(this).text('Edit');将所有其他元素文本返回到编辑

  • $(this).text().trim() == 'Save') ? 'Edit' : 'Save'是 if 语句的简写方法 .. 表示元素的文本是否Save设置为 Edit ，反之亦然 .. 并在.trim()此处仔细检查文本是否完全等于字符串

推荐阅读