В window.open на передается измененное значение

Тема в разделе "JavaScript", создана пользователем Denixxx, 22 дек 2015.

Модераторы: ZiX
  1. Denixxx

    Denixxx

    Регистр.:
    7 фев 2014
    Сообщения:
    247
    Симпатии:
    191
    Здравствуйте.

    Проблема в следующем.
    Делается таблица для дозаказа недостающих до нормы товаров в магазине.
    HTML:
    
    <table id="reorder">
    <thead>
    <tr>
    <th> ID </th>
    <th> Код </th>
    <th> Имя </th>
    <th> Остаток </th>
    <th> Норма </th>
    <th> Заказ </th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td> 11 </td>
    <td> MX2-4g </td>
    <td> MX-2 термопаста Аrctic Cooling, 4гр </td>
    <td> 2 </td>
    <td> 15 </td>
    <td><input size="2" class="item_reorder" name="item_reorder[]" value="13"></td>
    </tr>
    <tr>
    <td> 883 </td>
    <td> пос61-0.8-200bk </td>
    <td> Припой оловянно-свинцовый ПОС-61 (0.8мм 200г) без канифоли (катушка) </td>
    <td> 2 </td>
    <td> 15 </td>
    <td><input size="2" class="item_reorder" name="item_reorder[]" value="13"></td>
    </tr>
    <tr>
    <td> 1041 </td>
    <td> T10006 </td>
    <td> Наклейки на клавиатуру красные прозрачные </td>
    <td> 0 </td>
    <td> 3 </td>
    <td><input size="2" class="item_reorder" name="item_reorder[]" value="3"></td>
    </tr>
    </tbody>
    </table>
    <button onClick="print_reorder();" id="print_reorder;">Печать!</button>
    
    Суть: создается таблица с полями ввода — что дозаказать. При клике на кнопку «Печать!» должно открываться окно без стилей для печати.
    За это отвечает яваскрипт, который расположен ниже:
    Код:
    <script type="text/javascript">// <![CDATA[
    function print_reorder(){
    var clonetable = $('#reorder').clone();
    Table = $(clonetable)[0].outerHTML;
    PrintWindow=window.open("","","toolbar=no,titlebar=no,location=no,scrollbars=yes,status=no,resizable=yes");
    PrintWindow.document.open();
    PrintWindow.document.write("<!doctype html><html><head><title>Заказ</title>\<script language=\"Javascript\"\>function printit(){  "
    +"   document.getElementById('PrintButton').style.display='none';"
    +"   window.print() ;  "
    +"}\</script\></head><body>"
    + Table
    +"<input id=\"PrintButton\" type=\"button\" value=\"Распечатать\"  onClick=\"printit()\"></form><br /></center></body></html>");
    PrintWindow.document.close();
    }
    // ]]></script>
    Все работает замечательно — при клике на кнопку открывается окно, в котором нажимаем на «Распечатать» — кнопка «Распечатать» скрывается и распечатывается окно без стилей.
    Проблема в том, что если на исходном сайте отредактировать данные в поле ввода, то потом jquery клонирует эту таблицу и вроде должен копировать измененные данные, а не оригинал, но он их, собака, клонирует без учета изменений в инпутах, т.е. оригинал.
    Как можно склонировать таблицу с изменениями, внесенными позже руками?
    Пробовал писать и clone(true), не помогает, я чего-то не догоняю как это работает.
     
    Последнее редактирование: 22 дек 2015
  2. Absolute

    Absolute Крокодил ;)

    Регистр.:
    9 авг 2009
    Сообщения:
    364
    Симпатии:
    182
    Добавить в print_reorder в начало перед clone()
    Код:
     $('.item_reorder').each(function(){
        $(this).attr('value', this.value);
      });
     
    Denixxx нравится это.
  3. Denixxx

    Denixxx

    Регистр.:
    7 фев 2014
    Сообщения:
    247
    Симпатии:
    191
    Странно, но помогло. По сути получается мы берем атрибут value и присваиваем его туда же? В общем не понял почему, но это сработало
     
  4. Absolute

    Absolute Крокодил ;)

    Регистр.:
    9 авг 2009
    Сообщения:
    364
    Симпатии:
    182
    Не совсем так. Берем значение value и присваиваем его в атрибут value. Когда вводите новое значение, атрибут value не изменяется - в этом легко убедиться, просто посмотрев код элемента (в браузерах обычно правый щелчок "Посмотреть код элемента", "исследовать элемент" и т.д.), атрибут value - это просто значение по умолчанию. А т.к. вы извлекаете непосредственно HTML и формируете из него строку, то и физически HTML тоже приходится менять.
    В этом случае clone использовать вовсе необязательно - можно таблицу обернуть в div и получать содержимое
    var clonetable = $('div').html(); Переменная Table соответственно не нужна.
    А вот если бы формировали контент не строкой, а объектами jQuery
    Код:
    var PrintWindow = window.open();
    var clonetable = $('#reorder').clone();
    $(PrintWindow.document.body).append(clonetable);
    , то измененные значения так же перенесутся, при этом атрибут value останется в неизменном виде :)
     
    Denixxx нравится это.