我可以根据返回查看的行数为表格单元格生成 ID 吗？

Question

长话短说。我正在尝试在我的 C# MVC 3 应用程序中实现文件上传功能。 我有一个 fileuploader.js 文件，我认为该文件取自 http://github.com/valums/file-uploader（这原本不是我的应用程序）。 我想让文件上传功能可用于在我的视图中到达表上的行，行数将基于从数据库接收到的条目数。 我目前遇到的问题是 Upload btn 只出现在第一行。 我确定这是因为此功能从查找 id 为“file-uploader-attachment”的 div 开始 我尝试将 javascript 更改为 document.getElementsByClass 并给 div 一个类而不是一个 ID，但它没有成功。 因此，我需要即时生成和分配 ID，或者以其他方式为每行中的元素分配 ID，并允许 javascript 找到它们。 我会根据需要添加更多代码，但我不想用代码填充页面。 如果有人能指出我正确的方向或知道类似的解决方案。 同样，我需要一个文件上传 btn/feature 用于大小可变的表中的每一行。

表格中的单元格

  <td id="file-uploader-attachment"></td>

相关 javascript 代码中 createUploader() 函数的开始

     var uploader = new qq.FileUploader({
             element: document.getElementById('file-uploader-attachment'),

脚本在视图中：

 <script type="text/javascript">
$(document).ready(function () {

    // requests attachments from server, clears existing attachments and
    // replaces with most up to date attachments
    function LoadAttachments() {
        $('.loading').show();
        $.post('/CalibrationViewer/GetAttachments', { calibrationId: CAL_ID }, function (data) {
            $('#attachment').empty();
            $('#attachment').append(data);
            $('.loading').hide();
        });
    }

    function handleCheckbox() {
        if ($(this).find(':checkbox').is(':checked')) {
            //$(this).find('#file-uploader-attachment').html($('#myHTML').html());
            createUploader();
            $(this).find('file-uploader-attachment-Class').removeClass("upload-placeholder-unchecked");
            $(".qq-upload-button").css("margin-top", "-6px");
            $(".qq-upload-button").css("margin-bottom", "-20px");

        }
        else {
            $(this).find('.file-uploader-attachment-Class').addClass("upload-placeholder-unchecked");
            $(this).find('.file-uploader-attachment-Class').html($('#myHTML2').html());
        }
    }

    $('tr').each(handleCheckbox);
    $('tr').on('click', handleCheckbox);

    function createUploader() {

        $(".file-uploader-attachment-Class").each(function (element) {
            var uploader = new qq.FileUploader({
                element: element,
                sizeLimit: 2147483647, // max size
                action: '/Controller/Action',
                allowedExtensions: ['xls', 'xlsx', 'pdf', 'doc', 'docx', 'csv', 'txt', 'rtf', 'zip', 'zipx', '7z'],
                params: {
                    customer: CUST_NAME,
                    calibrationId: CAL_ID
                },
                multiple: false,
                debug: false,

                onComplete: function (id, fileName, responseJson) {
                    var resultMessage = document.getElementById('resultMessage');
                    alert(responseJson.msg);
                    $('#resultMessage').addClass('greenText');
                    resultMessage.innerHTML = responseJson.msg;

                    $('#attachment').prepend('<p><a class="attachment-file" href="' + responseJson.fileId + '">' + responseJson.fileName + '</a>');
                    $('#removeAttachment').prepend('<p><a class="attachment-delete" href="' + responseJson.fileId + '">X</a></p>');

                    $('#no-attachments').remove();
                }

            });

        });
    }
});

Answer 1

原因是您的 html 页面中只能有一个 id（文件上传器附件）（它们应该是唯一的）。如果它们不是唯一的，则采用第一个（如果这是按照标准或常识，我不知道）。

你想要达到的效果是这样的：

<td class="file-uploader-attachment"></td>

和

 var elements = document.getElementsByClassName('file-uploader-attachment');
 Array.prototype.filter.call(elements, function(element){
 var uploader = new qq.FileUploader({
         element: element, ...
 });

使用 jquery 甚至更简单（如果已经在使用）：

$(".file-uploader-attachment).each(function (element) {
   var uploader = new qq.FileUploader({
         element: element, ...
});