Замена пустых пространств ячейками в динамически загружаемой таблице HTML с использованием JQuery - PullRequest
Новая
       56

Замена пустых пространств ячейками в динамически загружаемой таблице HTML с использованием JQuery

0 голосов
/ 15 декабря 2011

У меня есть эта таблица, я ее динамически загружаю, и после этого я добавляю соответствующие заголовки столбцов для Well [#].Когда я загружаю данные, я не знаю, из каких скважин я получаю данные.Поэтому я не могу сказать, насколько большим будет стол.

Вопрос здесь такой, у меня есть таблица, которая выглядит примерно так:

enter image description here

Как вывидите, у меня есть пустое пространство, заполняющее строки длиной не 4 лунки (отмечено красным), и я хотел бы заполнить эти ячейки клетками, похожими на те, которые указаны синим цветом.Я анализировал таблицу с помощью firebug, ища какую-то строку, которая указывает на то, что ячейки вообще нет, но нет строки, которую можно заменить.

У меня есть объект myTable(), есть ли способ, позволяющий мне сделать то, что я описал выше?

Ответы [ 3 ]

1 голос
/ 15 декабря 2011 
//cache the table element and find the number of columns
var $table       = $('table'),
    column_count = $table.find('tr').eq(1).children('td').length;

//iterate through each row
$table.find('tr').each(function () {

    //cache this row and it's children columns
    var $this = $(this),
        $tds  = $this.children('td');

    //check if the number of columns in this row is less than the number of columns in the header
    if ($tds.length < column_count) {

        //add the difference of the needed columns and the current columns to the row
        for (var i = 0, len = (column_count - $tds.length); i < len; i++) {
            $this.append('<td>&nbps;</td>');
        }
    }
});

Вот демонстрационная версия: http://jsfiddle.net/AEjTZ/

Обратите внимание, что во второй строке таблицы показано, сколько столбцов есть (я пытаюсь выбрать зеленую строку вСкриншот).Возможно, вам придется изменить это, чтобы выбрать нужный ряд (зеленый ряд на вашем снимке экрана).

0 голосов
/ 15 декабря 2011

Эта проблема лучше всего решается при создании таблицы, а не после исправления. Есть ли способ определить максимальное количество столбцов до того, как вы начнете писать таблицы? Если есть, вы должны это сделать.

Если по какой-либо причине это невозможно, вы можете реализовать это: 

var TRs = $('table tr');
var maxTD = Math.max.apply(Math,        // this is a generic solution, 
    $.map(TRs, function(tr, i) {        // for your case, you may just get the
        return $(tr).find('td').length; // length of the 2nd row
    }));

TRs.each(function(tr, i) {
    var addTD = maxTD - $(tr).find('td').length;
    $(tr).append(new Array(addTD + (1)).join('<td>&nbsp;</td>');
});
0 голосов
/ 15 декабря 2011

Я не знаю, как вы динамически строите эту таблицу, но когда я сталкивался с этой проблемой в прошлом, я строю ее в результате запроса SQL, который я зацикливаю.Если вы делаете это именно так, то, скорее всего, проблема в том, что просто нет записей для этих комбинаций значений (конкретного лунки и генотипа).Решение, которое я использовал, состоит в том, чтобы изменить запрос к базе данных таким образом, чтобы он всегда возвращал строку для каждой комбинации (в данном случае, ну и генотипа).Вы можете сделать это с помощью открытого (также называемого декартовым) соединения между базовыми таблицами.Затем оставьте внешнее соединение обратно к таблице, в которой есть данные, которые вы хотите отобразить там.Если вы предоставите немного SQL, я мог бы помочь с построением запроса.

...