Question

我有一个包含2列的表格，名称，类型。错误消息显示为第1列中的div。我想提取该div并将其显示为tr下方的完整td。我尝试这样做：

    $ python3
    Python 3.5.2 (default, Nov 12 2018, 13:43:14) 
    [GCC 5.4.0 20160609] on linux
    Type "help", "copyright", "credits" or "license" for more information.
    >>> import sys                
    >>> sys.path.extend(['path1', 'path2'])
    >>> import split_farm
    >>> split_farm.__path__
    ['path1/split_farm']
    >>> locals()
    {'sys': <module 'sys' (built-in)>, '__name__': '__main__', '__package__': None, '__loader__': <class '_frozen_importlib.BuiltinImporter'>, '__spec__': None, 'split_farm': <module 'split_farm' from 'path1/split_farm/__init__.py'>, '__builtins__': <module 'builtins' (built-in)>, '__doc__': None}

但是这里的问题是，由于添加了$('#file-preview-thumbnails').find('tr').filter(":not(:hidden)").each(function () { var $progressBar = $(this).find('td.file-details-cell').find('.file-thumb-progress.kv-hidden'); if($progressBar.length) { $('<tr><td colspan="3>' + $progressBar[0].outerHTML + '</td></tr>').insertAfter($(this).closest('tr')); } });和td填充，这在UI上显示为单独的tr。有没有办法让我显示这样的div：

该表是通过插件构建的。

tr

$(document).ready(function () {
$("#input-b6").fileinput({
                theme: "explorer",
                dropZoneEnabled: true,
                maxFileCount: 10,
                msgUploadError: 'Unable to add file(s) to the case.',
                showDrag: false,
                showUploadedThumbs: true,
                hideThumbnailContent: true,
                browseClass: "btn btn-primary buttonCss",
                uploadClass: "btn btn-primary buttonCss",
                removeClass: "btn btn-primary buttonCss",
                removeErrorClass: 'btn btn-primary buttonCss',
                showCaption: false,
                initialPreviewAsData: true,
                uploadUrl: 'null',
                removeLabel: 'Remove Files',
                uploadLabel: 'Upload Files',
                browseLabel: 'Attach Files',
                uploadAsync: true,
                elPreviewContainer: '#banner_default',
                elPreviewImage: '#file-preview-thumbnails',
                msgSizeTooLarge: "This file is larger than {size} MB",
                layoutTemplates: {
                    main2: '{preview}\n<div class="kv-upload-progress hide"></div>\n' +
                        '  <div class="input-group-btn">\n' +
                        '{browse}\n{upload}\n{remove}\n',
                    actionDelete: '<button type="button" class="kv-file-remove {removeClass} removeBtnCss" title="{removeTitle}"{dataUrl}{dataKey}>{removeIcon}</button>\n',
                    actions: '<div class="file-actions">\n' +
                        '<div class="file-footer-buttons">\n' +
                        '<div class="dropdown">\n' +
                        '<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">\n' +
                        '<span class="caret"></span></button>\n' +
                        '<ul class="dropdown-menu pull-right">\n' +
                        '<li><a href="#">{upload} Upload</a></li>\n' +
                        '<li><a href="#">{delete} Remove</a></li>\n' +
                        '<li><a href="#">{zoom} Preview</a></li>\n' +
                        '</ul>\n' +
                        '</div>\n' +
                        '</div>',
                    actionZoom: '<button type="button" class="{zoomClass}" title="{zoomTitle}" onclick="openNewWindow(event)">{zoomIcon}</button>',
                },
            });
            
            
            var dropZoneHtml = $('.file-drop-zone-title');


            var typeOptionSelect = '<select class="form-control" id="idReportType">\n' +
                '<option value="" disabled selected>Select Type</option>\n' +
                '<option value="Appeal Document">Appeal Document</option>\n' +
                '<option value="Police Report">Police Report</option>\n' +
                '<option value="Travel Itinerary">Travel Itinerary</option>\n' +
                '<option value="Accums Spreadsheet">Accums Spreadsheet</option>\n' +
                '<option value="Clinical Document">Clinical Document</option>\n' +
                '<option value="Other">Other</option>\n' +
                '</select>';
                
                $('#input-b6').on('filebatchselected', function (event, files) {
                var dropTableZone = $('#file-preview-thumbnails');
                dropTableZone.removeClass('panel').addClass('panel');
                if (!dropTableZone.find('th').length) {
                    var dataToBePushed = [];
                    dataToBePushed.push(["NAME", "TYPE"]);
                    //Create a HTML Table element.
                    var table = $("<table />");
                    table[0].border = "1";

                    //Get the count of columns.
                    var columnCount = dataToBePushed[0].length;
                    //Add the header row.
                    var row = $(table[0].insertRow(-1));
                    for (var i = 0; i < columnCount; i++) {
                        var headerCell = $("<th scope=\"col\"/>");
                        headerCell.html(dataToBePushed[0][i]);
                        row.append(headerCell);
                    }

                    row.insertBefore('div > tr:first');
                }

                dropTableZone.find('tr').filter(":not(:hidden)").each(function () {
                    if ($(this).find('td.file-actions-cell').prev().find('select').length === 0) {
                        $('<td>' + typeOptionSelect + '</td>').insertBefore($(this).find('td.file-actions-cell'));
                    }
                });
                $('.file-drop-zone').empty().append(dropZoneHtml);
                dropTableZone.insertBefore($('.input-group-btn'));


            });
})

.file-input.theme-explorer {
            padding: 1rem;
        }

        .has-error .form-control {
            border-color: #00000038 !important;
        }

        .theme-explorer .file-thumb-progress .progress, .theme-explorer .file-thumb-progress .progress-bar {
            height: 26px;
            font-size: 11px;
            line-height: 26px;
        }

        .btn.btn-primary.buttonCss {
            width: 32%;
            border-radius: 5px;
        }

        .removeBtnCss .glyphicon.glyphicon-trash {
            color: #b11313d9 !important;
        }

        #file-preview-thumbnails {
            margin-bottom: 1rem;
            padding: 1rem;
        }

        samp {
            display: none;
        }

        .input-group-btn {
            width: 100% !important;
            display: flex !important;
            justify-content: space-between !important;
        }

        body {
            max-width: 100%;
        }


        #dropdownMenuButton {
            background-color: white !important;
            border: 0.5px solid #00000038 !important;
        }

        th {
            width: 60rem;
        }

        td {
            padding-top: .5em;
            padding-bottom: .5em;
        }

        .file-upload-indicator {
            display: none !important;
        }

Answer 1

您生成的HTML中存在错误，colspan后缺少引号。固定引号后，错误div如预期的那样占据了整行。我还添加了一行以隐藏现有的进度条，这样您就不会以两个结尾。

$('#file-preview-thumbnails').find('tr').filter(":not(:hidden)").each(function () {
                var $progressBar = $(this).find('td.file-details-cell').find('.file-thumb-progress.kv-hidden');
                if($progressBar.length) {
                    $('<tr><td colspan="3">' + $progressBar[0].outerHTML + '</td></tr>').insertAfter($(this).closest('tr'));
                    $progressBar.hide()
                }
            });

结果：

编辑：更改CSS以使其看起来像您的图片：

.theme-explorer .file-thumb-progress .progress {
  margin: 0 -10;
}
.theme-explorer .file-thumb-progress .progress, .theme-explorer .file-thumb-progress .progress-bar {
    height: 25px;
    line-height: 25px;
}

在给定CSS之后应用那些，或在每条指令之后使用!important来获得此信息：

在tr的td下方显示全长div / span

1 个答案: