Как я могу установить высоту HtmlTableRow, чтобы он был сгенерирован, но не отображался?

Мне нужно динамически отображать строки в HtmlTable. Я думал, что установка высоты HtmlTableRow в 0 поможет, но это не так. Вот как я создаю строку и ее "части частей" в коде:

// Row 3
foapalrow3 = new HtmlTableRow();
foapalrow3.ID = "foapalrow3";

var cellColIndex2 = new HtmlTableCell();
cellColIndex2.Width = CELL_WIDTH;
foapalrow3.Cells.Add(cellColIndex2);
var cellColFund2 = new HtmlTableCell();
cellColFund2.Width = CELL_WIDTH;
foapalrow3.Cells.Add(cellColFund2);
var cellColOrg2 = new HtmlTableCell();
cellColOrg2.Width = CELL_WIDTH;
foapalrow3.Cells.Add(cellColOrg2);
var cellColAccount2 = new HtmlTableCell();
cellColAccount2.Width = CELL_WIDTH;
foapalrow3.Cells.Add(cellColAccount2);
var cellColActivity2 = new HtmlTableCell();
cellColActivity2.Width = CELL_WIDTH;
foapalrow3.Cells.Add(cellColActivity2);
var cellColAmount2 = new HtmlTableCell();
cellColAmount2.Width = CELL_WIDTH;
foapalrow3.Cells.Add(cellColAmount2);

boxIndex2 = new TextBox()
{
    CssClass = "dplatypus-webform-field-input",
    Width = TEXTBOX_WIDTH,
    ID = "boxIndex2foapalrow3"
};
cellColIndex2.Controls.Add(boxIndex2);

boxFund2 = new TextBox()
{
    CssClass = "dplatypus-webform-field-input",
    Width = TEXTBOX_WIDTH,
    ID = "boxFund2foapalrow3"
};
cellColFund2.Controls.Add(boxFund2);

boxOrganization2 = new TextBox()
{
    CssClass = "dplatypus-webform-field-input",
    Width = TEXTBOX_WIDTH,
    ID = "boxOrg2foapalrow3"
};
cellColOrg2.Controls.Add(boxOrganization2);

boxAccount2 = new TextBox()
{
    CssClass = "dplatypus-webform-field-input",
    Width = TEXTBOX_WIDTH,
    ID = "boxAccount2foapalrow3"
};
cellColAccount2.Controls.Add(boxAccount2);

boxActivity2 = new TextBox()
{
    CssClass = "dplatypus-webform-field-input",
    Width = TEXTBOX_WIDTH,
    ID = "boxActivity2foapalrow3"
};
cellColActivity2.Controls.Add(boxActivity2);

boxAmount2 = new TextBox()
{
    CssClass = "dplatypus-webform-field-input",
    Width = TEXTBOX_WIDTH,
    ID = "boxAmount2foapalrow3"
};
cellColAmount2.Controls.Add(boxAmount2);
//cellColAmount2.ID = ""; <= Maybe the cells need IDs too, like: ?

foapalHTMLTable.Rows.Add(foapalrow3);
foapalrow3.Height = "0"; // <= does this need something appended, such as "em" or such? Normal height may be 15

... а вот jQuery, чтобы попытаться условно увеличить высоту, чтобы сделать строку видимой:

$(document).on("click", '[id$=btnAddFoapalRow]', function (e) {
    if ($('[id$=foapalrow3]').height.not("15")) {
        console.log('reached the foapalrow3 not visible branch');
        $('[id$=foapalrow3]').height(15);
    }
});

К сожалению, строка видна с самого начала; установка высоты в 0 не препятствует тому, чтобы это показало "во всей его красе" сразу. Нужно ли также устанавливать высоту HtmlTableCells и / или TextBoxes в 0? Или что еще нужно?

Примечание: я понимаю, что jQuery, вероятно, не будет работать ("height.not" пока только предположение), но мне нужно сначала решить первую проблему (что высота строки не установлена ​​в 0 и, таким образом, эффективно это невидимо).

ОБНОВИТЬ

Я прячу строки после их создания следующим образом (в коде C# / коде на стороне сервера):

        foapalHTMLTable.Rows.Add(foapalrow3);
        foapalrow3.Visible = false;

... и есть это в моем клиентском jQuery:

$(document).on("click", '[id$=btnAddFoapalRow]', function (e) {
    if ($('[id$=foapalrow3]').not(":visible")) {
        alert('reached the foapalrow3 not visible branch');
        $('[id$=foapalrow3]').toggle();
    }
    else if ($('[id$=foapalrow4]').not(":visible")) {
        alert('reached the foapalrow4 not visible branch');
        $('[id$=foapalrow4]').slideDown();
    }
});

... но это не работает - невидимые строки никогда не делаются видимыми (я вижу первое предупреждение - фактически два раза (я должен отклонить его дважды подряд)).

ОБНОВЛЕНИЕ 2

Я закомментировал настройку строк как невидимую (visible = false). Я добавил это в готовую функцию:

$(document).ready(function () {
    alert('The ready function has been reached'); /* This is a "sanity check" so it can be verified that this jQuery script is running/ran */
    $('[id$=foapalrow3]').toggle();
    $('[id$=foapalrow4]').toggle();
});

Я вижу предупреждение, но переключатель не переключает их с видимого на -in. Я также попытался.slideUp(), и это тоже ничего не сделал. Рави предлагает "установить отображение: нет"; Я хочу это попробовать, но как и где?

Источник

2 ответа

Решение

Это (вроде) работает, но глупо:

Если я установлю не высоту HtmlTableRow, а высоту элементов в HtmlTableRow (TextBoxes / input = text) равной 0, нажатие кнопки "добавляет" эту строку (увеличивает высоту элементов, увеличивая тем самым высота родителя, HtmlTableRow, и его родителя, HtmlTable.

Но из-за того, что просто "короткий" вместо скрытого, этот спящий ряд выглядит более забавным, чем мусорная корзина, до нажатия кнопки "+":

Я мог бы быть в состоянии "продать" это как функцию ("минимальная высота скрытого ряда указывает на то, что он доступен, но еще не используется"), но я действительно сомневаюсь в этом.

Так что я все еще открыт для предложений о том, как отшлифовать эту клудгификацию.

Я выполняю это так:

Код C-позади (на стороне сервера):

boxIndex2 = new TextBox()
{
    CssClass = "dplatypus-webform-field-input",
    Width = TEXTBOX_WIDTH,
    Height = 0,
    ID = "boxIndex2foapalrow3"
};
. . . // similar code for the other elements (where their height is also set to 0) elided for brevity

ПРИМЕЧАНИЕ: HtmlTableRow не устанавливается невидимым - если я это сделаю, он вообще не будет работать (строка невидима, но остается такой же даже после нажатия кнопки "+").

JQuery на стороне клиента:

$(document).on("click", '[id$=btnAddFoapalRow]', function (e) {
    var textboxHeight = 15;
    if ($('[id$=foapalrow3]').not(":visible")) {
    //if (($('[id$=boxIndex2foapalrow3]').height() == 0) {
        alert('reached the foapalrow3 height zilch branch');
        $('[id$=boxIndex2foapalrow3').height(textboxHeight);
        $('[id$=boxFund2foapalrow3').height(textboxHeight);
        $('[id$=boxOrg2foapalrow3').height(textboxHeight);
        $('[id$=boxAccount2foapalrow3').height(textboxHeight);
        $('[id$=boxActivity2foapalrow3').height(textboxHeight);
        $('[id$=boxAmount2foapalrow3').height(textboxHeight);
    }
    . . .
});

ПРИМЕЧАНИЕ. Другая загадка состоит в том, почему тест if ($('[id$=foapalrow3])) not (": visible")) "возвращает true, поскольку строка не должна быть невидимой...??? Закомментированный тест, который должен вернуть true:

if (($('[id$=boxIndex2foapalrow3]').height() == 0) {

... не (возвращает false).

???

ОБНОВИТЬ

Я смог улучшить JQuery до этого:

$(document).on("click", '[id$=btnAddFoapalRow]', function (e) {
    var textboxHeight = 15;
    if ($('[id$=boxIndex2foapalrow3]').height() == 0) {
        $('[id$=boxIndex2foapalrow3').height(textboxHeight);
        $('[id$=boxFund2foapalrow3').height(textboxHeight);
        $('[id$=boxOrg2foapalrow3').height(textboxHeight);
        $('[id$=boxAccount2foapalrow3').height(textboxHeight);
        $('[id$=boxActivity2foapalrow3').height(textboxHeight);
        $('[id$=boxAmount2foapalrow3').height(textboxHeight);
    }
    else if ($('[id$=boxIndex3foapalrow4]').height() == 0) {
        $('[id$=boxIndex3foapalrow4').height(textboxHeight);
        $('[id$=boxFund3foapalrow4').height(textboxHeight);
        $('[id$=boxOrg3foapalrow4').height(textboxHeight);
        $('[id$=boxAccount3foapalrow4').height(textboxHeight);
        $('[id$=boxActivity3foapalrow4').height(textboxHeight);
        $('[id$=boxAmount3foapalrow4').height(textboxHeight);
    }
});

... но все равно работает не совсем правильно - когда я нажимаю кнопку, обе строки добавляются одновременно. Я думаю, это потому, что jQuery работает дважды, но почему он это делает?

Состояние предварительного нажатия кнопки HtmlTable теперь таково:

ОБНОВЛЕНИЕ 3

Я наконец понял это - у меня было два экземпляра одной и той же веб-части на странице, и это означает, что jQuery из обоих экземпляров попадает в "View Source" и, таким образом, он запускается дважды. Удалив один из экземпляров веб-части, проблема была решена, и код выше (в обновлении 2) работает нормально.

Единственная "проблема" сейчас заключается в том, что строки не полностью скрыты до нажатия кнопки "+" - их высота невелика, но больше 0.

Источник

Вы могли бы использовать JQuery toggle() скрыть / показать динамически. Или вы могли бы использовать display:none Свойство CSS (как класс, если вы хотите). Оба будут генерировать HTML в фоновом режиме, но не будут отображаться на видимой странице.

Источник
Другие вопросы по тегам