Добавить div с классом перед таблицей
Приветствую всех!
На странице есть таблица: <table style="WIDTH:100%" cellspacing="1" cellpadding="0" border="0"> <tbody> <tr> <td></td> <td style="VERTICAL-ALIGN:middle;WIDTH:33%;BACKGROUND-COLOR:#999999"> <font color="#ffffff">МАРКА МАГНИТОЛЫ</font></td> <td style="VERTICAL-ALIGN:middle;WIDTH:33%;BACKGROUND-COLOR:#999999"> <font color="#ffffff">ПРОИЗВОДИТЕЛЬ</font></td> <td style="VERTICAL-ALIGN:middle;WIDTH:33%;BACKGROUND-COLOR:#999999"><font color="#ffffff">ТИП ПАМЯТИ</font></td> <td style="VERTICAL-ALIGN:middle;WIDTH:33%;BACKGROUND-COLOR:#999999"><font color="#ffffff">ЦЕНА</font></td> </tr> <tr> <td></td> <td> </td> <td> </td> <td><p></p></td> <td>150 руб.</td> </tr> <tr> <td></td> <td> </td> <td> </td> <td></td> <td>150 руб.</td> </tr> </tbody> </table> Нужно её почистить и обернуть в <div class="table-responsive">...</div> Как работать внутри тегов я знаю. Написал код: <script type="text/javascript"> $(document).ready(function(){ $("table").addClass("table table-striped"); $("table").removeAttr("cellspacing").removeAttr("cellpadding").removeAttr("style").removeAttr("border"); $("tr").removeAttr("style"); $("td").removeAttr("style"); $("font").attr("color", "#c00"); }); </script> Работает, лишнее почистилось. А вот как работать за пределами тегов я не знаю. Нужно перед тегом <table поставить <div class="table-responsive"> и после тега </table> поставить </div> Можете помочь? Заранее, спасибо! |
Цитата:
<!DOCTYPE html> <html> <head> <meta http-equiv='Content-Type' content='text/html; charset=windows-1251' /> <script src='https://code.jquery.com/jquery-latest.js'></script> <!-- <script src="https://code.angularjs.org/1.3.9/angular.min.js"></script> <script src="https://code.angularjs.org/1.3.9/angular-route.js"></script> --> <style type='text/css'> .table-responsive { border: 1px solid; } </style> <script type='text/javascript'> $(function(){ $('table').wrap('<div class="table-responsive"></div>'); }); </script> </head> <body> <table> <td>Test</td> </table> </body> </html> |
Да, работает.
Спасибо! И есть ещё один вопрос: как между тегами <td> убрать теги <p>? Между тегами <p>есть текст</p>. Нужно, чтобы тест оставался на месте. |
Vaska,
$("p").unwrap(); |
Цитата:
2. нужно, не на всей странице удалять теги <p>, а только в таблице. |
Цитата:
вот! $('td').each(function(){ var data = $(this).children("p").html(); $(this).children("p").detach(); $(this).html(data); }); |
Цитата:
<!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> p{ background-color: hsla(0, 100%, 50%, 1); color: hsla(0, 0%, 100%, 1); } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script> $(function() { $("td p").replaceWith(function() { return this.innerHTML }) }); </script> </head> <body> <p>123</p> <table> <tr> <td><p>Test</p></td> </tr> <tr> <td><p>Test2</p></td> </tr> </table> <p>456</p> </body> </html> |
Цитата:
Спасибо! |
рони,
Ваш вариант тоже прекрасно работает. Спасибо! |
Цитата:
|
Часовой пояс GMT +3, время: 06:08. |