自我LV1

先上js

  function updateNewComments(textBox) {
            // 取得目前 txtNewField 的值
            var newValue = textBox.value;

            // 查找同一行中的 COMMENTSLabel、txtNewField、txtNEWCOMMENTS
            var gridViewRow = textBox.closest('tr');
            var oldContentLabel = gridViewRow.querySelector('span[id$="COMMENTSLabel"]');
            var txtNewComments = gridViewRow.querySelector('#' + textBox.id.replace('txtNewField', 'txtNEWCOMMENTS'));

            // 取得舊文字內
            if (oldContentLabel) {
                var oldValue = oldContentLabel.innerText;
            
                // 找出新增的文字
                var newText = newValue.replace(oldValue, '').trim();

                // 移除多餘的空白行
                newText = newText.replace(/^\s*\n/gm, '');

                // 更新 txtNEWCOMMENTS 的值
                if (txtNewComments) {
                    txtNewComments.value = newText;
                }
            }
        }

aspx

<asp:TemplateField HeaderText="輸入回覆" ItemStyle-Width="10%" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Left">
                                                    <ItemTemplate>
                                                        <%--<asp:TextBox ID="txtNewField" runat="server" Text='' TextMode="MultiLine" Rows="3" Width="100%"></asp:TextBox>--%>
                                                        <asp:TextBox ID="txtNewField" runat="server" Text='<%# Bind("COMMENTS") %>' TextMode="MultiLine" CssClass="multiline-textbox" Rows="3" onkeyup="autoResizeTextBox(this);updateNewComments(this)"></asp:TextBox>
                                                    </ItemTemplate>
                                                </asp:TemplateField>

情境是這樣的:

在gridview中，有1個textbox(idtxtNewField)是記錄每週進度，記錄像:

2024/1/1
新增
2024/1/8
修改

此時user要再增加1筆記錄如下:

2024/1/1
新增
2024/1/8
修改
2024/1/15
再修改

因為textbox(idtxtNewField) 

會越記越長

就想多另一個textbox(id=txtNEWCOMMENTS)

只記錄跟之前記錄的不同之處，如下:

2024/1/15
再修改

 

因為要做比對

所以故意在gridview中新增label(idCOMMENTSLabel)先顯示之前的記錄文字內容

再用label(idCOMMENTSLabel)比對改過的textbox(idtxtNewField) 內容

最後把新舊內文比對後，有不同的文字內容

放在textbox(id=txtNEWCOMMENTS)中

 

js真是好用

在user 填寫時就能即時帶出文字內容

 

而重點是js的querySelector

如何在同一行gridview中去取得label(idCOMMENTSLabel)的舊文、比對textbox(idtxtNewField) 的新文

接著就是用replace  就可以了

 newText = newText.replace(/^\s*\n/gm, '');

是為了移除多餘的空白行

 

自我LV~