Форум

Vaska · #1 (**permalink**) 26.05.2017, 13:58

Приветствую всех!

На странице есть таблица:

<table style="WIDTH:100%" cellspacing="1" cellpadding="0" border="0">
	<tbody>
		<tr>
			<td></td>
			<td style="VERTICAL-ALIGN:middle;WIDTH:33%;BACKGROUND-COLOR:#999999">&nbsp; <font color="#ffffff">МАРКА МАГНИТОЛЫ</font></td>
			<td style="VERTICAL-ALIGN:middle;WIDTH:33%;BACKGROUND-COLOR:#999999">&nbsp; <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>&nbsp;</td>
			<td>&nbsp;</td>
			<td><p></p></td>
			<td>150&nbsp;руб.</td>
		</tr>
		<tr>
			<td></td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
			<td></td>
			<td>150&nbsp;руб.</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>

Можете помочь?

Заранее, спасибо!

ksa · #2 (**permalink**) 26.05.2017, 14:30

Сообщение от Vaska

Нужно перед тегом <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>

Vaska · #3 (**permalink**) 26.05.2017, 15:36

Да, работает.
Спасибо!
И есть ещё один вопрос: как между тегами <td> убрать теги <p>?
Между тегами <p>есть текст</p>. Нужно, чтобы тест оставался на месте.

Diphenyl Oxalate · #4 (**permalink**) 26.05.2017, 16:38

Vaska,

$("p").unwrap();

Vaska · #5 (**permalink**) 26.05.2017, 16:54

Сообщение от Diphenyl Oxalate

Vaska,

$("p").unwrap();

1. нет, не работает вообще на странице. Странно.
2. нужно, не на всей странице удалять теги <p>, а только в таблице.

j0hnik · #6 (**permalink**) 26.05.2017, 17:15

Сообщение от Diphenyl Oxalate

Vaska,

$("p").unwrap();

не не не
вот!

$('td').each(function(){
   var data = $(this).children("p").html();
   $(this).children("p").detach();
   $(this).html(data);
});

рони · #7 (**permalink**) 26.05.2017, 17:36

Сообщение от Vaska

как между тегами <td> убрать теги <p>?
Между тегами <p>есть текст</p>. Нужно, чтобы тест оставался на месте.

<!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>

Vaska · #8 (**permalink**) 26.05.2017, 17:44

Сообщение от j0hnik

не не не
вот!

$('td').each(function(){
   var data = $(this).children("p").html();
   $(this).children("p").detach();
   $(this).html(data);
});

Вот, это работает.
Спасибо!

Vaska · #9 (**permalink**) 26.05.2017, 17:51

рони,
Ваш вариант тоже прекрасно работает.
Спасибо!

рони · #10 (**permalink**) 26.05.2017, 17:52

Сообщение от Vaska

Вот, это работает.

внешне да, и для данного случая возможно достаточно, но лучше вариант в пост №7

Форум

Справочник

Discord чат

Курсы javascript