iT邦幫忙

0

[已解決]javascript index 更新

  • 分享至 

  • xImage

感謝底下回覆的兩位,後來發現確實Index會自己變動。

但是要抓取的index要是tr的index。td & input好像抓不出來
我原本一直拘泥於td Input上的i值,在這上面做文章,
delete時更新i值做法是錯的,雖然id&name上的@i應該是有變化。
但是onblur本身的@i值仍會是舊的,這點我一直搞不懂原因。
(希望其他大老能提供相關解法或解釋為何這樣做是錯的)

後來改成找到父節點tr的index值,發現這會隨著增減自動變動,
就不用在delete上更新i值,直接在function中獲取
var rowindex = node.parentNode.parentNode.rowIndex;
這樣就會隨著增減變動,在傳遞GetCName然後反向解開獲取子節點,找到欄位後將值塞入。
分隔線----------------------------------------分隔線----------------------------------------分隔線----------------------------------------
我程式目標是 當我signname onblur時,會判斷該員工是否離職(判斷離職有做出來),
沒離職時,會從資料庫抓出該員工中文姓名並塞入 cname欄位。

想問一下,當我點選delete後,js我有寫更新index的程式,
但是當我Onblur的時候,他會抓舊的index值,然後塞入舊的index 欄位,
這部分應該如何修改?
有人建議說把資料放入資料庫後再從load就好,
但是如果這個flow一直被刪刪改改頁面,
就會Load好幾次,這不是我想要的。

想請教一下有沒有更好的方法可以處理?
HTML

@for (int i = 0; i < Model.poSigns.Count; i++)
{
<tr>
<td><input type="text" id="poSigns[@i].signname" name="poSigns[@i].signname"
class="form-control" value="@Model.poSigns[@i].signname" onblur="checkSignName(this.value.trim(), @i)" />
.
.
.
</td>
</tr>
}

JS 更新index

function DeleteItem(btn, index) {
btn.closest('tr').remove();
// Update the index of remaining rows
rows = $('#signTable tbody tr');
for (var i = 0; i < rows.length; i++) {
var currentRow = $(rows[i]);
currentRow.find('input[type=text], input[type=number], select').each(function () {
var name = $(this).attr('name');
$(this).attr('name', name.replace(/\[\d+\]/, '[' + i + ']'));
$(this).attr('id', name.replace(/\[\d+\]/, '[' + i + ']'));
currentRow.find('input[type=text]').on('blur', function () {
});
checkSignName(this.value.trim(), i);
});
currentRow.find('select').on('blur', function () {
checkSignName(currentRow.find('input[type=text]').val().trim(), i);
});
}
}

js獲取值

function checkSignName(value,index) {
var check = false;
$.ajax({
url: '/Home/checkSignName',
type: 'POST',
data: { value: value },
async: false,
success: function (response) {
if (response.valid) {
alert(value + ' may have resigned or no information has been created. Please contact MIS.');
check = true;
}
else {
GetCName(value, index);
}
}
});
return check;
}
function GetCName(signname, index) {
$.ajax({
url: '/Home/GetCName',
type: 'POST',
data: { signname: signname },
success: function (response) {
document.getElementById(`poSigns[${index}].cname`).value = response.cname;
}
});
}

https://ithelp.ithome.com.tw/upload/images/20231106/20147438OVF4gtgoQc.jpg
https://ithelp.ithome.com.tw/upload/images/20231106/20147438RENswMkrkk.jpg

看更多先前的討論...收起先前的討論...
Foy iT邦新手 5 級 ‧ 2023-11-07 07:50:38 檢舉
那你就在這次刪除return 回來資料不就好了,這樣也是post 一次
rain_yu iT邦新手 1 級 ‧ 2023-11-07 08:26:53 檢舉
可能我沒寫過,所以看不懂你的意思,可以稍微再詳細一點嗎?
Foy iT邦新手 5 級 ‧ 2023-11-07 08:28:11 檢舉
或者你用jsgrid修改完成再post,參考: http://js-grid.com/demos/
iseileen iT邦新手 5 級 ‧ 2023-11-07 09:11:59 檢舉
index是會自動改變, 每次onblur跟delete的時候直接取該元件的index,就不會有新舊index的問題
rain_yu iT邦新手 1 級 ‧ 2023-11-07 09:17:51 檢舉
我不是很懂,要如何直接取元件的index或更新?
有沒有相關連結可以參考?
這樣是不是說delete 更新Index的寫法是錯?
我會那樣寫主要是需要重新排序stage,排序完順便更新index
BTW 我把更新index關掉,onblur還是會有問題,
變成有些列值會影響到上一列的cname,我會再改看看。
希望可以提供參考連結
rain_yu iT邦新手 1 級 ‧ 2023-11-08 14:15:26 檢舉
感謝iseileen,我已經寫出來了
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 個回答

1
Foy
iT邦新手 5 級 ‧ 2023-11-07 08:34:47
最佳解答
[HttpPost]
        public ActionResult Newenterprise(FormCollection post)
        {
            後端資料處理代碼


            using (IshaSysEntities db = new IshaSysEntities())
            {  ///ORM
                var data = db.user_info.FirstOrDefault(item => item.id == id);
                if (data != null)
                {
                    string formattedDate = DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss.ffffff");
                    DateTime? parsedDate = DateTime.TryParse(formattedDate, out DateTime result)
                        ? (DateTime?)result
                        : null;
                    data.enterprise_id = enterprise_id;
                    data.company_id = company_id;
                    data.factory_id = factory_id;
                    data.update_at = parsedDate;
                    db.SaveChanges();
                    ///寫進資料庫
                }
            }
            
            UserData UserDataClass = new UserData(); 
            List<user_info> dataFromDatabase = UserDataClass.DataFromDatabase();
            return Json(dataFromDatabase, JsonRequestBehavior.AllowGet);
            ///return 更新後的值回前端
        }
    }
}

以上是簡略的controller 範例處理後端資料

rain_yu iT邦新手 1 級 ‧ 2023-11-07 09:14:48 檢舉

我晚點試試看,謝謝~

rain_yu iT邦新手 1 級 ‧ 2023-11-08 14:12:34 檢舉

這個部份我寫不出來,
因為要考慮到可能儲存後,列數的增減,
列數不同時候我就會err,這部分我不會改,有沒有參考連結?

我要發表回答

立即登入回答