Почему разница в значениях .html () между IE и Firefox (добавлены подробности вопроса)

#javascript #jquery #html

#javascript #jquery #HTML

Вопрос:

У меня есть эта таблица, в которой я могу генерировать динамические строки (которые вводятся <type="text" /> в виде содержимого) через jquery .append (), и я сохраняю сгенерированный html в a <input type="hidden" /> , получая html через jquery .html() и добавляя значение к скрытому с помощью .val().

В Internet Explorer, если я ввожу значения в текстовые поля, значения также включаются в скрытое поле, но в Firefox все, кроме значений, сохраняется в поле.

Редактировать:

Итак, мой вопрос: какой метод я должен использовать, чтобы отобразить значения даже в Firefox?

Редактировать:

Вот более подробная информация по моему вопросу:

Таблица построена как таковая:

 <table id="tblTest" class="testTable">
    <thead>
        <tr>
            <td>Product</td>
            <td>Quantity</td>
            <td>Remove TR</td>
        </tr>
    </thead>
    <tbody id="tblTestTR">
    </tbody>
    <tfoot>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tfoot>
</table>
<input type="button" id="btnTest" value="Add Table Row" />amp;nbsp;<input type="submit" id="btnSubmit" value="Submit Form" />
<input type="hidden" id="txtHTML" name="txtHTML" />
  

С функцией добавления строки таблицы, являющейся:

 function AddTR()
        {
            var txtBox = "<tr id='dynTR'><td><input type='text' class='textBoxes' value='' /></td><td><input type='text' class='textBoxes' value='0' /></td><td><input type='button' value='remove' /></td></tr>";
            x  ;
            var oRow = $(txtBox);
            $(this).append(oRow);

            oRow.find("input[type="button"]").click(function ()
            {
                $(this).closest("tr").remove();
            });
        }
  

И чтобы получить HTML <tbody> являющегося:

 function GetInnerHTML(node)
        {
            alert(node.html());
            $("#txtHTML").val(node.html());
        }
  

Комментарии:

1. Не следует ли вам использовать val() вместо html() ?

2. Не могли бы вы, пожалуйста, привести пример?

3. @tfbox — извините, добавил эту деталь к вопросу. Я заметил, что это читается так, как будто я добавлял значение к скрытому с помощью .html (), а не .val ();

Ответ №1:

Правильный способ считывания значений входных элементов — это считывание их фактических значений, а не разметки, которая их отображает. Вы не можете предположить, что браузер изменит разметку для сохранения значений входных элементов.

Тот факт, что IE, похоже, делает это, действительно плох. Всегда имейте в виду, что IE печально известен (даже с IE9) нарушением стандартов.

Аналогичный случай, когда IE сохраняет состояние, манипулируя исходной разметкой: чтение href атрибута относительной ссылки даст вам разрешенный абсолютный URL. Просто чтобы дать вам представление о том, насколько многочисленны эти причуды…

Не основывайте свой алгоритм на причудах браузера, а ищите правильный способ. Попробуйте val() метод, который предоставляет jQuery.

Комментарии:

1. На самом деле я не пытаюсь прочитать значения полей ввода. Мне действительно просто нужно сохранить html со значениями только для пользователя.

Ответ №2:

firebug не всегда обновляет изменения, внесенные jquery. если вы консоль.запишите значения, и вы увидите, что это есть.

кстати — вы знакомы с jqgrid?

Комментарии:

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

Ответ №3:

Я не могу сказать, что вы делаете, это действительно непонятно из вашего кода, попробуйте это

 <table>
<tbody>
</tbody>
</table>
<form>
<input type="text" name="textI" />
<input type="submit" />
</form>

$("form").submit(function( ev ){
  var val = $( this ).find("[name=textI]").val(); 
  $('tbody').append('<tr><td>'   val   '<button>Remove</button></td></tr>');

});

$('table').delegate('button','click',function(){
  $( this ).parent().remove(); //parent targets td, perhaps need to use parent().parent()
});
  

Комментарии:

1. .closest(«<tr>») точно такой же, как при использовании parent() или parent().parent(), поскольку мне просто нужно удалить <tr> из таблицы. И я не спрашиваю о том, как удалить <tr>

2. Да, closest() будет искать родословную для первого попадания. Производительность этого не раскрывается, но вы можете безопасно использовать это вместо прямого поиска родительских файлов.

3. Я понимаю… Спасибо за совет. Извините, если мой последний комментарий звучит неприятно или что-то в этомроде. -.-‘