Question

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

<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');

    });

获取输出：

预期输出：

Answer 1

您可以尝试

E/AndroidRuntime: FATAL EXCEPTION: main
                  java.lang.NullPointerException
                      at com.example.jayarajarackal.juiceapp.juiceAdapterGreens.replace(juiceAdapterGreens.java:84)
                      at com.example.jayarajarackal.juiceapp.juiceAdapterGreens.access$000(juiceAdapterGreens.java:20)
                      at com.example.jayarajarackal.juiceapp.juiceAdapterGreens$1.onClick(juiceAdapterGreens.java:60)
                      at android.view.View.performClick(View.java:4204)
                      at android.view.View$PerformClick.run(View.java:17355)
                      at android.os.Handler.handleCallback(Handler.java:725)
                      at android.os.Handler.dispatchMessage(Handler.java:92)
                      at android.os.Looper.loop(Looper.java:137)
                      at android.app.ActivityThread.main(ActivityThread.java:5069)
                      at java.lang.reflect.Method.invokeNative(Native Method)
                      at java.lang.reflect.Method.invoke(Method.java:511)
                      at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:793)
                      at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:560)
                      at dalvik.system.NativeStart.main(Native Method)
Application terminated.

说明：

$("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');是if语句..的简化方法，表示如果元素的文本为$(this).text().trim() == 'Save') ? 'Edit' : 'Save'，则将其设置为Edit，反之亦然..大约Save在这里仔细检查文本是否完全等于字符串

使用jQuery单击时更改td元素的文本

1 个答案: