HTML each遍歷展示並在js中獲取值的方式

html:

<div class="row">
    <div class="col-sm-12">
        <div class="form-group">
            <div class="col-xs-12" th:each="FileInfo: ${FileInfoList}">
                <div class="col-xs-8">
                    <input name="fileName" th:value="${FileInfo.fileName}" class="form-control" type="text"
                           readonly>
                </div>
                <div class="col-xs-2">
                    <span class="input-group-addon"><i class="fa fa-download" th:data-filename1="${FileInfo.fileName}" onclick="downloadFile(this)"></i></span>
                </div>
                <div class="col-xs-2">
                    <span class="input-group-addon"><i class="fa fa-remove" th:data-filename2="${FileInfo.fileName}" onclick="removeFile(this)"></i></span>
                </div>

                
            </div>
        </div>
    </div>
</div>

js:

 function downloadFile(_this) {
        var fileName = $(_this).data('filename1')
        var fileCode = document.getElementById("fileCode").value;//附件編號
        window.location.href = prefix + "/downloadFile/" + fileName + "/" + fileCode;
    }

    function removeFile(_this) {
        var fileName = $(_this).data('filename2')
        var fileCode = document.getElementById("fileCode").value;//附件編號
        // window.location.href = prefix + "/removeFile/" + fileName + "/" + fileCode;
        onchange(fileCode, fileName);
    }

function onchange(fileCode, fileName) {
        $.modal.confirm("正在刪除附件信息，請確認是否執行", function () {
            $.ajax({
                cache: false,
                type: "GET",
                url: prefix + "/removeFile/" + fileName + "/" + fileCode,
                data: {},
                async: false,
                error: function (request) {
                    $.modal.alertError("系統錯誤");
                },
                success: function (data) {
                    // $.modal.alertWarning("操作成功");
                    location.reload()
                }
            });
        });
    };

說明：

1 遇到的難題是i標籤a標籤與input標籤值傳遞的問題，使用onclick()傳值，this對象僅能獲取本標籤的屬性，在已定義的屬性中，不能獲取到同一dev下input的值，所以使用自定義標籤，寫法：data-xxxx，js中可以根據this別名取值，$(this).data('xxxx')。

JQuery可以使用自定義屬性，

th:data-filename1 
與
var fileName = $(_this).data('filename1')

2 可以用於單獨下載每個附件，或作爲唯一標識進行操作處理，下載，刪除，修改等事件

 

學習是最公平的事！