如何使用 jquery 将 html 和 css 应用于 table 中的选定行？

Question

在我的 MVC 3 应用程序中，我的问题是，我有一个 table，其中的行由返回到视图的记录数生成。如果记录不包含文件，这些行有一个复选框和一个上传按钮功能。这个想法是，如果没有与记录关联的文件，"No Cert" 将显示在 Cert 列下。只有选中复选框时，此单元格才会显示 "upload file" btn。单击此 btn 后 window 打开到 select 文件文件已 selected，将出现一条 pop-up 消息，通知用户文件已成功上传。但是，selected 行的 Cert 下的单元格现在将为空白。只有刷新页面才会出现文件名。

我确实尝试添加一个 div 和一个关联的 class 来显示 "Uploaded" 并且它适用于第一个。但是当我在另一个 selected 行上重复该过程时，"uploaded" div 再次应用于第一行并且我刚刚 selected 的行中的单元格被保留空白的。我相信这是因为代码使用的是 td，第一个 ID "attBtn" 在下面的 onComplete 函数中使用。

                      onComplete: function (id, fileName, responseJson) {
                    var resultMessage = document.getElementById('resultMessage');
                    alert(responseJson.msg);
                    $('.qq-uploader').remove();
                    $('#attBtn').prepend('<div class="uploadedTag"><p>Uploaded</p></div>');

table 处理上传功能的部分：

      @if (Model.ElementAt(index).CertName != null)
             {
                 <td>@Html.DisplayFor(m => Model.ElementAt(index).CertName)</td>
             }
             else
             {                    
                <td id ="attBtn" class="file-uploader-attachment-Class"></td>
             }

视图中使用的脚本：

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

    function handleCheckbox() {
        if ($(this).find(':checkbox').is(':checked')) {
            createUploader($(this));

            $(this).find('.file-uploader-attachment-Class').removeClass("upload-placeholder-unchecked");
        }
        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(container) {

        var elements = container.find('.file-uploader-attachment-Class');

        var CAL_ID = container.find(':checkbox').val()

        Array.prototype.filter.call(elements, function (element) {

            var uploader = new qq.FileUploader({
                element: element,
                sizeLimit: 2147483647, // max size
                action: '/CalibrationViewer/AttachmentUpload',
                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);
                    $('.qq-uploader').remove();
                    $('#attBtn').prepend('<div class="uploadedTag"><p>Uploaded</p></div>');

                }

            });

        });
    }
});

如何识别我正在使用的当前行。？如果我能得到刚刚插入到单元格中的文件名而不是 "uploadded"

，那就太好了

Answer 1

我不会试图找出您的特定元素类，而只是指出一种通用方法，这是一种非常常见的模式，用于在 html 的重复块中隔离实例。

由于您使用的是 table ，行将是 <tr>

$('.someButtonClass').click(function(){

   /* "this" is the instance of the elements 
       represented by selector that event triggered on
    */
    var $row = $(this).closest('tr'); /* isolate row instance*/

    /* now look within row instance to manipulate descendant elements  */

    $row.find('.someOtherClass').doSomething();
});

如何使用 jquery 将 html 和 css 应用于 table 中的选定行？

How to apply html and css to a selected row in table using jquery?

html

javascript

jquery

asp.net-mvc-3