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

在我的MVC3应用程序中，我的问题是，我有一个表，其中的行数是由返回到视图的记录数生成的。 如果记录不包含文件，则这些行具有复选框和上载btn功能。 其想法是，如果没有与记录关联的文件，“无证书”将显示在证书列下。 只有选中此复选框，此单元格才会显示“上载文件”btn。 单击此btn并打开窗口以选择文件后 选择文件后，将显示一条弹出消息，通知用户文件已成功上载。 但是，该选定行的Cert下的单元格现在将为空。只有页面刷新时，才会显示文件名

我确实尝试添加一个带有关联类的div来显示“Uploaded”，第一个成功了。 但是，当我在另一个选中的行上重复该过程时，“upload”div将再次应用于第一行，而我刚刚选中的行中的单元格将保留为空。 我相信这是因为代码使用了td，在下面的onComplete函数中使用了第一个ID“attBtn”

                      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>');

onComplete:function（id、文件名、responseJson）{
var resultMessage=document.getElementById（'resultMessage'）；
警报（responseJson.msg）；
$（'.qq uploader'）.remove（）；
$（“#attBtn”）。前置（“已上载”
”；

表中有关上载功能的部分：

      @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>
             }

@if（Model.ElementAt（index.CertName！=null）
{
@DisplayFor（m=>Model.ElementAt（index.CertName）
}
其他的
{                    
}

视图中使用的脚本：

   <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>');

                }

            });

        });
    }
});

$（文档）.ready（函数（）{
函数handleCheckbox（）{
if（$（this）.find（':checkbox'）.is（':checked'））{
createUploader（$（this））；
$（this）.find（'.file uploader attachment Class'）.removeClass（“未选中上载占位符”）；
}
否则{
$（this）.find（'.file uploader attachment Class'）.addClass（“未选中上载占位符”）；
$（this.find（'.file uploader attachment Class'）.html（$（'#myHTML2'）.html（））；
}
}
$（'tr'）。每个（handleCheckbox）；
$（'tr'）。在（'click'，handleCheckbox）上；
函数createUploader（容器）{
var elements=container.find（'.file uploader attachment Class'）；
var CAL_ID=container.find（':checkbox'）.val（）
Array.prototype.filter.call（元素，函数（元素）{
var uploader=new qq.FileUploader({
元素：元素，
sizeLimit:2147483647，//最大大小
操作：'/CalibrationViewer/AttachmentUpload'，
允许的扩展：['xls'，'xlsx'，'pdf'，'doc'，'docx'，'csv'，'txt'，'rtf'，'zip'，'zipx'，'7z']，
参数：{
客户：客户名称，
校准ID:校准ID
},
多重：假，
调试：错误，
onComplete:函数（id、文件名、responseJson）{
var resultMessage=document.getElementById（'resultMessage'）；
警报（responseJson.msg）；
$（'.qq uploader'）.remove（）；
$（“#attBtn”）。前置（“已上载”
”；
}
});
});
}
});

如何识别当前正在使用的行？

---

如果我能得到刚刚插入到单元格中的文件名的名称，而不是“上载”的名称，那就太好了。

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

因为您使用的是表，所以行将是

---

我将尝试在代码中合并，基于上述内容，我在onComplete函数下添加了var$row到createUpLoader和$row.find，但没有乐趣，我将继续，感谢您的建议。我通过使用以下-elements.closest（'.file uploader attachment Class'）。prepend（'uploader

'）取得了一些进展但是同样的方法不允许我删除qq上传器类，所以现在我有“上传”和“上传文件”btn在同一个单元格中？？我打算发布我的答案想法，但我认为它不够具体。我看不出您是如何处理上载按钮单击事件的。但在该单击事件中，您知道自己所在的行，因为您知道单击了什么按钮。您可以向该行（或单元格，无论什么）添加类在按钮中，单击“偶数”以用作onComplete事件中的选择器。完成后删除该类。

$('.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();
});