【JavaScript】明細一覧の値変更を確認する方法

Web画面で照会と更新が同時に行える明細を扱う場合、

DB値と画面入力値の比較を行い、行毎に更新フラグを立てる処理を紹介します。

行ごとに更新フラグを立てることで、入力があった行のみ更新処理を行うなど様々な処理に活用することができます。

JavaScript

funciton inputValidation() {

    var tBody = document.getElementById('tblSearchResultBody');
    var rowLength = tBody.row.length;
    isDatachanged = false;
    
    for ( var i = 0; i < rowLength; i++) {
    
        // 変更前のDBの値
        var db_empCode = $('#db_empCode' + i).val();
        var db_empName = $('#db_empName' + i).val();
        
        // 画面入力値
        var empCode = $('#empCode' + i).val();
        var empName = $('#empName' + i).val();
        
        // 更新フラグを初期化
        var flagTransaction = $('#flagTransaction' + i).val();
        
        if (   db_empCode != empCode
            || db_empName != empName) {
            isDatachanged = true;
            // 更新フラグをセット
            $('#flagTransaction' + i).val('u');
        }
        else {
            $('#flagTransaction' + i).val('');
        }
    }
    
    return true;
}

funciton inputValidation() {

var tBody = document.getElementById('tblSearchResultBody');

var rowLength = tBody.row.length;

isDatachanged = false;

for ( var i = 0; i < rowLength; i++) {

// 変更前のDBの値

var db_empCode = $('#db_empCode' + i).val();

var db_empName = $('#db_empName' + i).val();

// 画面入力値

var empCode = $('#empCode' + i).val();

var empName = $('#empName' + i).val();

// 更新フラグを初期化

var flagTransaction = $('#flagTransaction' + i).val();

if ( db_empCode != empCode

|| db_empName != empName) {

isDatachanged = true;

// 更新フラグをセット

$('#flagTransaction' + i).val('u');

}

else {

$('#flagTransaction' + i).val('');

}

return true;

}

JSP

<table id="listTable" cellspacing="0" cellpadding="0">
    <thead>
        <tr>
            <th>社員コード</th>
            <th>氏名</th>
        </tr>
    </thead>
    
    <tbody>
    <logic:notEmpty name="xxxS01form" property="items">
    <logic:iterate id="item" name="xxxS01form" property="items" indexId="idx">
        <tr>
            <td>
                <c:out value="${item.empCode}" />
                
                <%-- 更新フラグ --%>
                <html:hidden styleId="flagTransaction${idx}" name="item" 
                 property="flagTransaction" indexed="true" />
                
                <%-- 更新日時 --%>
                <html:hidden styleId="updateDate${idx}" name="item" property="updateDate" indexed="true" />
            </td>
            <td>
                <c:out value="${item.empName}" />
            </td>
        </tr>
    </logic:iterate>
    </logic:notEmpty>
    </tbody>
</table>

<thead>

<tr>

<th>社員コード</th>

</tr>

</thead>

<tbody>

<logic:notEmpty name="xxxS01form" property="items">

<logic:iterate id="item" name="xxxS01form" property="items" indexId="idx">

<tr>

<td>

<c:out value="${item.empCode}" />

<%-- 更新フラグ --%>

<html:hidden styleId="flagTransaction${idx}" name="item"

property="flagTransaction" indexed="true" />

<%-- 更新日時 --%>

<html:hidden styleId="updateDate${idx}" name="item" property="updateDate" indexed="true" />

</td>

<td>

<c:out value="${item.empName}" />

</td>

</tr>

</logic:iterate>

</logic:notEmpty>

</tbody>

</table>