Как хранить и добавлять большие строки в дом

0

Мне нужно добавить большие данные к симулятору dom, используя jquery, hoe, я храню их в переменной, как показано ниже, дает ошибку токена ILLEGAL, я думаю, beacause это многострочная строка?

Как сделать это одной строкой или любым другим способом добавить?

Код JQuery ::

var tab_data="<div class='table-responsive'><table class='table fixed' id='topics'><tbody><tr class='row'><td class='col-md-1 droppable corner_piece ui-droppable' id='row-1'>              </td><td class='col-md-1 droppable border_bg second_piece ui-droppable' id='row-9'>  </td> <td class='col-md-1 droppable border_bg ui-droppable' id='row-17'>    </td><td class='col-md-1 droppable border_bg ui-droppable' id='row-25'>    </td> <td class='col-md-1 droppable border_bg ui-droppable' id='row-33'>    </td><td class='col-md-1 droppable border_bg ui-droppable' id='opp-40'>   </td> <td class='col-md-1 droppable border_bg ui-droppable' id='opp-32'>    </td><td class='col-md-1 droppable border_bg ui-droppable' id='opp-24'>    </td> <td class='col-md-1 droppable border_bg second_last_piece ui-droppable' id='opp-16'>    </td><td class='col-md-1 droppable border_bg last_piece ui-droppable' id='opp-8'>    </td>
            </tr> <tr class='row'> <td class='col-md-1 droppable border_bg first_piece ui-droppable' id='row-2'>    </td><td class='col-md-1 droppable border_bg ui-droppable' id='row-10'>              </td> <td class='col-md-1 droppable border_bg ui-droppable' id='row-18'>    </td><td class='col-md-1 droppable border_bg ui-droppable' id='row-26'>    </td> <td class='col-md-1 droppable border_bg ui-droppable' id='row-34'>    </td><td class='col-md-1 droppable border_bg ui-droppable' id='opp-39'>   </td> <td class='col-md-1 droppable border_bg ui-droppable' id='opp-31'>    </td><td class='col-md-1 droppable border_bg ui-droppable' id='opp-23'>    </td> <td class='col-md-1 droppable border_bg ui-droppable' id='opp-15'>    </td><td class='col-md-1 droppable border_bg last_piece ui-droppable' id='opp-7'>    </td>
            </tr> <tr class='row'> <td class='col-md-1 droppable border_bg first_piece ui-droppable' id='row-3'>    </td><td class='col-md-1 droppable border_bg ui-droppable' id='row-11'>               </td> <td class='col-md-1 droppable border_bg ui-droppable' id='row-19'>    </td><td class='col-md-1 droppable border_bg ui-droppable' id='row-27'>    </td> <td class='col-md-1 droppable border_bg ui-droppable' id='row-35'>    </td><td class='col-md-1 droppable border_bg ui-droppable' id='opp-38'>   </td> <td class='col-md-1 droppable border_bg ui-droppable' id='opp-30'>    </td><td class='col-md-1 droppable border_bg ui-droppable' id='opp-22'>    </td> <td class='col-md-1 droppable border_bg ui-droppable' id='opp-14'>    </td><td class='col-md-1 droppable border_bg last_piece ui-droppable' id='opp-6'>    </td> </tr>
              <tr class='row'><td class='col-md-1 droppable border_bg first_piece ui-droppable' id='row-4'>    </td><td class='col-md-1 droppable border_bg ui-droppable' id='row-12'>              </td> <td class='col-md-1 droppable border_bg ui-droppable' id='row-20'>    </td><td class='col-md-1 droppable border_bg ui-droppable' id='row-28'>    </td> <td class='col-md-1 droppable border_bg ui-droppable' id='row-36'>    </td><td class='col-md-1 droppable border_bg ui-droppable' id='opp-37'>   </td> <td class='col-md-1 droppable border_bg ui-droppable' id='opp-29'>    </td><td class='col-md-1 droppable border_bg ui-droppable' id='opp-21'>    </td> <td class='col-md-1 droppable border_bg ui-droppable' id='opp-13'>    </td><td class='col-md-1 droppable border_bg last_piece ui-droppable' id='opp-5'>    </td> </tr>
              <tr class='row'><td class='col-md-1 droppable border_bg first_piece ui-droppable' id='row-5'>    </td><td class='col-md-1 droppable border_bg ui-droppable' id='row-13'>              </td> <td class='col-md-1 droppable border_bg ui-droppable' id='row-21'>    </td><td class='col-md-1 droppable border_bg ui-droppable' id='row-29'>    </td> <td class='col-md-1 droppable border_bg ui-droppable' id='row-37'>    </td><td class='col-md-1 droppable border_bg ui-droppable' id='opp-36'>   </td> <td class='col-md-1 droppable border_bg ui-droppable' id='opp-28'>    </td><td class='col-md-1 droppable border_bg ui-droppable' id='opp-20'>    </td> <td class='col-md-1 droppable border_bg ui-droppable' id='opp-12'>    </td><td class='col-md-1 droppable border_bg last_piece ui-droppable' id='opp-4'>    </td> </tr>
              <tr class='row'><td class='col-md-1 droppable border_bg first_piece ui-droppable' id='row-6'>    </td><td class='col-md-1 droppable border_bg ui-droppable' id='row-14'>              </td> <td class='col-md-1 droppable border_bg ui-droppable' id='row-22'>    </td><td class='col-md-1 droppable border_bg ui-droppable' id='row-30'>    </td> <td class='col-md-1 droppable border_bg ui-droppable' id='row-38'>    </td><td class='col-md-1 droppable border_bg ui-droppable' id='opp-35'>   </td> <td class='col-md-1 droppable border_bg ui-droppable' id='opp-27'>    </td><td class='col-md-1 droppable border_bg ui-droppable' id='opp-19'>    </td> <td class='col-md-1 droppable border_bg ui-droppable' id='opp-11'>    </td><td class='col-md-1 droppable border_bg last_piece ui-droppable' id='opp-3'>    </td> </tr>
              <tr class='row'><td class='col-md-1 droppable border_bg first_piece ui-droppable' id='row-7'>    </td><td class='col-md-1 droppable border_bg ui-droppable' id='row-15'>              </td> <td class='col-md-1 droppable border_bg ui-droppable' id='row-23'>    </td><td class='col-md-1 droppable border_bg ui-droppable' id='row-31'>    </td> <td class='col-md-1 droppable border_bg ui-droppable' id='row-39'>    </td><td class='col-md-1 droppable border_bg ui-droppable' id='opp-34'>   </td> <td class='col-md-1 droppable border_bg ui-droppable' id='opp-26'>    </td><td class='col-md-1 droppable border_bg ui-droppable' id='opp-18'>    </td> <td class='col-md-1 droppable border_bg ui-droppable' id='opp-10'>    </td><td class='col-md-1 droppable border_bg last_piece ui-droppable' id='opp-2'>    </td> </tr>
              <tr class='row'><td class='col-md-1 droppable border_bg first_piece ui-droppable' id='row-8'>    </td><td class='col-md-1 droppable border_bg second_piece ui-droppable' id='row-16'></td> <td class='col-md-1 droppable border_bg ui-droppable' id='row-24'>    </td><td class='col-md-1 droppable border_bg ui-droppable' id='row-32'>    </td> <td class='col-md-1 droppable border_bg ui-droppable' id='row-40'>    </td><td class='col-md-1 droppable border_bg ui-droppable' id='opp-33'>   </td> <td class='col-md-1 droppable border_bg ui-droppable' id='opp-25'>    </td><td class='col-md-1 droppable border_bg ui-droppable' id='opp-17'>    </td> <td class='col-md-1 droppable border_bg second_last_piece ui-droppable' id='opp-9'>    </td><td class='col-md-1 droppable corner_piece last_piece ui-droppable' id='opp-1'>    </td></tr>     
  </tbody></table><div id='display_board'></div></div>";
Теги:
append

2 ответа

2

Я предлагаю вам использовать конкатенацию строк, например

var tabData = '<div class="table-responsive">'
tabData += '<span>';
tabData += 'Some data';
tabData += '</span>';
tabData += '</div>';

ИЛИ

Вы можете добавить \ чтобы сделать его многострочной строкой

var tabData = '<div class="table-responsive"> \
<span> \ 
Some data \
</span>\
</div>';
1

Вы можете использовать \ в конце строки в многострочной строке

var tab_data = "<div class='table-responsive'><table class='table fixed' id='topics'><tbody><tr class='row'><td class='col-md-1 droppable corner_piece ui-droppable' id='row-1'>              </td><td class='col-md-1 droppable border_bg second_piece ui-droppable' id='row-9'>  </td> <td class='col-md-1 droppable border_bg ui-droppable' id='row-17'>    </td><td class='col-md-1 droppable border_bg ui-droppable' id='row-25'>    </td> <td class='col-md-1 droppable border_bg ui-droppable' id='row-33'>    </td><td class='col-md-1 droppable border_bg ui-droppable' id='opp-40'>   </td> <td class='col-md-1 droppable border_bg ui-droppable' id='opp-32'>    </td><td class='col-md-1 droppable border_bg ui-droppable' id='opp-24'>    </td> <td class='col-md-1 droppable border_bg second_last_piece ui-droppable' id='opp-16'>    </td><td class='col-md-1 droppable border_bg last_piece ui-droppable' id='opp-8'>    </td>\
            </tr> <tr class='row'> <td class='col-md-1 droppable border_bg first_piece ui-droppable' id='row-2'>    </td><td class='col-md-1 droppable border_bg ui-droppable' id='row-10'>              </td> <td class='col-md-1 droppable border_bg ui-droppable' id='row-18'>    </td><td class='col-md-1 droppable border_bg ui-droppable' id='row-26'>    </td> <td class='col-md-1 droppable border_bg ui-droppable' id='row-34'>    </td><td class='col-md-1 droppable border_bg ui-droppable' id='opp-39'>   </td> <td class='col-md-1 droppable border_bg ui-droppable' id='opp-31'>    </td><td class='col-md-1 droppable border_bg ui-droppable' id='opp-23'>    </td> <td class='col-md-1 droppable border_bg ui-droppable' id='opp-15'>    </td><td class='col-md-1 droppable border_bg last_piece ui-droppable' id='opp-7'>    </td>\
            </tr> <tr class='row'> <td class='col-md-1 droppable border_bg first_piece ui-droppable' id='row-3'>    </td><td class='col-md-1 droppable border_bg ui-droppable' id='row-11'>               </td> <td class='col-md-1 droppable border_bg ui-droppable' id='row-19'>    </td><td class='col-md-1 droppable border_bg ui-droppable' id='row-27'>    </td> <td class='col-md-1 droppable border_bg ui-droppable' id='row-35'>    </td><td class='col-md-1 droppable border_bg ui-droppable' id='opp-38'>   </td> <td class='col-md-1 droppable border_bg ui-droppable' id='opp-30'>    </td><td class='col-md-1 droppable border_bg ui-droppable' id='opp-22'>    </td> <td class='col-md-1 droppable border_bg ui-droppable' id='opp-14'>    </td><td class='col-md-1 droppable border_bg last_piece ui-droppable' id='opp-6'>    </td> </tr>\
              <tr class='row'><td class='col-md-1 droppable border_bg first_piece ui-droppable' id='row-4'>    </td><td class='col-md-1 droppable border_bg ui-droppable' id='row-12'>              </td> <td class='col-md-1 droppable border_bg ui-droppable' id='row-20'>    </td><td class='col-md-1 droppable border_bg ui-droppable' id='row-28'>    </td> <td class='col-md-1 droppable border_bg ui-droppable' id='row-36'>    </td><td class='col-md-1 droppable border_bg ui-droppable' id='opp-37'>   </td> <td class='col-md-1 droppable border_bg ui-droppable' id='opp-29'>    </td><td class='col-md-1 droppable border_bg ui-droppable' id='opp-21'>    </td> <td class='col-md-1 droppable border_bg ui-droppable' id='opp-13'>    </td><td class='col-md-1 droppable border_bg last_piece ui-droppable' id='opp-5'>    </td> </tr>\
              <tr class='row'><td class='col-md-1 droppable border_bg first_piece ui-droppable' id='row-5'>    </td><td class='col-md-1 droppable border_bg ui-droppable' id='row-13'>              </td> <td class='col-md-1 droppable border_bg ui-droppable' id='row-21'>    </td><td class='col-md-1 droppable border_bg ui-droppable' id='row-29'>    </td> <td class='col-md-1 droppable border_bg ui-droppable' id='row-37'>    </td><td class='col-md-1 droppable border_bg ui-droppable' id='opp-36'>   </td> <td class='col-md-1 droppable border_bg ui-droppable' id='opp-28'>    </td><td class='col-md-1 droppable border_bg ui-droppable' id='opp-20'>    </td> <td class='col-md-1 droppable border_bg ui-droppable' id='opp-12'>    </td><td class='col-md-1 droppable border_bg last_piece ui-droppable' id='opp-4'>    </td> </tr>\
              <tr class='row'><td class='col-md-1 droppable border_bg first_piece ui-droppable' id='row-6'>    </td><td class='col-md-1 droppable border_bg ui-droppable' id='row-14'>              </td> <td class='col-md-1 droppable border_bg ui-droppable' id='row-22'>    </td><td class='col-md-1 droppable border_bg ui-droppable' id='row-30'>    </td> <td class='col-md-1 droppable border_bg ui-droppable' id='row-38'>    </td><td class='col-md-1 droppable border_bg ui-droppable' id='opp-35'>   </td> <td class='col-md-1 droppable border_bg ui-droppable' id='opp-27'>    </td><td class='col-md-1 droppable border_bg ui-droppable' id='opp-19'>    </td> <td class='col-md-1 droppable border_bg ui-droppable' id='opp-11'>    </td><td class='col-md-1 droppable border_bg last_piece ui-droppable' id='opp-3'>    </td> </tr>\
              <tr class='row'><td class='col-md-1 droppable border_bg first_piece ui-droppable' id='row-7'>    </td><td class='col-md-1 droppable border_bg ui-droppable' id='row-15'>              </td> <td class='col-md-1 droppable border_bg ui-droppable' id='row-23'>    </td><td class='col-md-1 droppable border_bg ui-droppable' id='row-31'>    </td> <td class='col-md-1 droppable border_bg ui-droppable' id='row-39'>    </td><td class='col-md-1 droppable border_bg ui-droppable' id='opp-34'>   </td> <td class='col-md-1 droppable border_bg ui-droppable' id='opp-26'>    </td><td class='col-md-1 droppable border_bg ui-droppable' id='opp-18'>    </td> <td class='col-md-1 droppable border_bg ui-droppable' id='opp-10'>    </td><td class='col-md-1 droppable border_bg last_piece ui-droppable' id='opp-2'>    </td> </tr>\
              <tr class='row'><td class='col-md-1 droppable border_bg first_piece ui-droppable' id='row-8'>    </td><td class='col-md-1 droppable border_bg second_piece ui-droppable' id='row-16'></td> <td class='col-md-1 droppable border_bg ui-droppable' id='row-24'>    </td><td class='col-md-1 droppable border_bg ui-droppable' id='row-32'>    </td> <td class='col-md-1 droppable border_bg ui-droppable' id='row-40'>    </td><td class='col-md-1 droppable border_bg ui-droppable' id='opp-33'>   </td> <td class='col-md-1 droppable border_bg ui-droppable' id='opp-25'>    </td><td class='col-md-1 droppable border_bg ui-droppable' id='opp-17'>    </td> <td class='col-md-1 droppable border_bg second_last_piece ui-droppable' id='opp-9'>    </td><td class='col-md-1 droppable corner_piece last_piece ui-droppable' id='opp-1'>    </td></tr>\
  </tbody></table><div id='display_board'></div></div>";

или вам нужно использовать конкатенацию строк, например

var string = 'line1'
   + 'line2'
   + 'line3'
   + 'line4';

Ещё вопросы

Сообщество Overcoder
Наверх
Меню