Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 18.05.2017, 11:16
Аватар для Dean777
Интересующийся
Отправить личное сообщение для Dean777 Посмотреть профиль Найти все сообщения от Dean777
 
Регистрация: 17.05.2017
Сообщений: 10

Помогите с таблицей
Вот код
<html>
 <head>
   <title></title>
	<script>
    	var table ='<center><h2 style="margin-left: 18%;"> Машины в нашем гараже</h2><button>Каталог Машин</button></center>';
	    var cars = [
		['Hyundai','Tucson','White',1999,5000],
		['Toyota', 'Toyota Land Cruiser 100','Yellow', 1995,3000],
		['Lexus', 'GS 300','Black', 1991,2000]
		]
		 table += '<table class="table"><tr class="tb_th"><th>Марка</th>		<th>Модель</th><th>Цвет</th><th>Год выпуска</th><th>Цена</th></tr>';
		for (var i = 0; i < cars.length; i++){
		table += '<tr class="tb_th"><td class="tb-td">'+cars[i][0]+'</td>		<td>'+cars[i][1]+'</td><td>'+cars[i][2]+'</td><td>'+cars[i][3]+'</td>';
		if (cars[i][4] > 3000){
		table += '<td class="dorogoi">'+cars[i][4]+' &#9650</td></tr>';
		} else
		table += '<td class="deshovii">'+cars[i][4]+' &#9660</td></tr>'
		}
		table += '</table>';
		document.write(table)
	</script>
		<style>
			body{
			background-color:#0e0e0e;
			} 
			.table {
			width:50%;
			height:20%;
			margin:0 0%;
			border-collapse: collapse;
			border: 2px solid transparent;
			}
			.table tr th {
			text-align:left;
			color: #4d4d4d;
			}
			.table .tb_th {
			background: #1a1a1a;
			}
			.table tr td {
			color: #444444;
			}
			.table tr {
			background: #1d1d1d;
			border-top: 2px solid #232323;
			border-bottom: 2px solid #232323;
			}
			.table tr .tb-td {
			color: #b5b5b5;
			}
			.table tr .dorogoi {
			color: #cd3e4a;
			}
			.table tr .deshovii {
			color: #84b547;
			}
			h2 {
			color: white;
			text-align: left;
			}
		</style>
  </head>
	<body>
	</body>
<html>

Нужно сделать так чтобы при нажатии на кнопку эта же графа появлялась рядом правой стороны.

Последний раз редактировалось ksa, 18.05.2017 в 11:52. Причина: Оформление кода
Ответить с цитированием
  #2 (permalink)  
Старый 18.05.2017, 11:54
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,205

Сообщение от Dean777
Нужно сделать так чтобы при нажатии на кнопку эта же графа появлялась рядом правой стороны.
Картинкой челе поясни...
Ответить с цитированием
  #3 (permalink)  
Старый 18.05.2017, 12:00
Аватар для Dean777
Интересующийся
Отправить личное сообщение для Dean777 Посмотреть профиль Найти все сообщения от Dean777
 
Регистрация: 17.05.2017
Сообщений: 10

https://codepen.io/Sirius89/pen/oWPJMg
Ответить с цитированием
  #4 (permalink)  
Старый 18.05.2017, 12:14
Аватар для Dean777
Интересующийся
Отправить личное сообщение для Dean777 Посмотреть профиль Найти все сообщения от Dean777
 
Регистрация: 17.05.2017
Сообщений: 10

Так понятнее наверно https://codepen.io/Sirius89/pen/oWPJMg
по нажатию на кнопку нужно чтоб он с правой стороны выводил эту же таблицу.
Ответить с цитированием
  #5 (permalink)  
Старый 18.05.2017, 13:17
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,205

Сообщение от Dean777 Посмотреть сообщение
https://codepen.io/Sirius89/pen/oWPJMg
Как вариант...

<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<script src='http://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'>
.hide_block{
	display: none;
}
</style>
<script type='text/javascript'>
$(function(){
	$('.toggle').click(function(){
		$(this).parent().parent().find('.hide_block').toggle(400);
	});
});
</script>
</head>
<body>
<table style="width: 100%;" border="1">
 <tbody>
    <tr>
    <td style="width: 200px;">
        <button class="toggle">toggle button</button>
    </td>
    <td>
        <div class="hide_block">toggle content 1</div>
    </td>
    </tr>
    <tr>
    <td>
        <button class="toggle">toggle button</button>
    </td>
    <td>
        <div class="hide_block">toggle content 2</div>
    </td>
    </tr>
    <tr>
    <td>
        <button class="toggle">toggle button</button>
    </td>
    <td>
        <div class="hide_block">toggle content 3</div>
    </td>
    </tr>
    <tr>
    <td>
        <button class="toggle">toggle button</button>
    </td>
    <td>
        <div class="hide_block">toggle content 4</div>
    </td>
    </tr>
</tbody>
</table>
</body>
</html>
Ответить с цитированием
  #6 (permalink)  
Старый 18.05.2017, 13:50
Аватар для Dean777
Интересующийся
Отправить личное сообщение для Dean777 Посмотреть профиль Найти все сообщения от Dean777
 
Регистрация: 17.05.2017
Сообщений: 10

Да я уже как та натыкала. Только вот не получается на вторую кнопку поставить. https://codepen.io/Sirius89/pen/eWLXxe
Ответить с цитированием
  #7 (permalink)  
Старый 18.05.2017, 14:19
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,205

Сообщение от Dean777
Только вот не получается на вторую кнопку поставить.
Что поставить?
Ответить с цитированием
  #8 (permalink)  
Старый 19.05.2017, 06:55
Аватар для Dean777
Интересующийся
Отправить личное сообщение для Dean777 Посмотреть профиль Найти все сообщения от Dean777
 
Регистрация: 17.05.2017
Сообщений: 10

Сделала на button скрипт на который при нажатии появляется та же таблица только вот понять не могу. Как оттуда убрать некоторые элементы и добавить туда еще кнопки. Помогите пожалуйста. Очень прошу.
Ответить с цитированием
  #9 (permalink)  
Старый 19.05.2017, 08:31
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,205

Сообщение от Dean777
Как оттуда убрать некоторые элементы
На то есть метод
http://www.fpublisher.ru/documentati...s#hremovechild
Сообщение от Dean777
и добавить туда еще кнопки
На то есть несколько методов
http://www.fpublisher.ru/documentati...hcreateelement
и
http://www.fpublisher.ru/documentati...s#happendchild
http://www.fpublisher.ru/documentati...#hinsertbefore
Ответить с цитированием
  #10 (permalink)  
Старый 19.05.2017, 10:31
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,205

Сообщение от Dean777
Как оттуда убрать некоторые элементы и добавить туда еще кнопки.
Даже в букваре есть статейка про это
https://learn.javascript.ru/modifying-document
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
2-ой select грузит [object Object] помогите! espltd AJAX и COMET 1 06.08.2014 00:01
помогите с таблицей simple Элементы интерфейса 18 07.05.2011 10:53
Помогите с таблицей AKIMbl4 Элементы интерфейса 14 28.02.2011 20:03
Помогите! Многоуровневые вкладки! sergeeeeee Элементы интерфейса 2 02.08.2010 23:50
Люди, ПОМОГИТЕ! Bel666 jQuery 11 27.04.2010 15:38