Добавить 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, время: 15:39. |