Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Помогите сделать задание по Javascript,вообще не понимаю,буду очень благодарна! (https://javascript.ru/forum/dom-window/55557-pomogite-sdelat-zadanie-po-javascript-voobshhe-ne-ponimayu-budu-ochen-blagodarna.html)

Настена 04.05.2015 14:00

Помогите сделать задание по Javascript,вообще не понимаю,буду очень благодарна!
 
Разместить список членов бригады в виде таблицы с дополнительным полем,в которое поместить флажок.Создать еще одну таблицу с 4 цветами.При выборе цвета в текстовое поле помещается его название.Затем по нажатию кнопки с подтверждением помощью функции confirm() измените цвета фона для тех членов бригадыЮдля которых установлен флажок

Sigizmund2012 04.05.2015 15:29

Во, набыдлокодил:
<form id="brigade" action="/" method="get">
	<table id="members">
		<tr class="name">
			<td>Вася</td>
			<td>
			<input type="checkbox" name="member" value="vasya">
			</td>
		</tr>
		<tr class="name">
			<td>Петя</td>
			<td>
			<input type="checkbox" name="member" value="petya">
			</td>
		</tr>
		<tr class="name">
			<td>Боря</td>
			<td>
			<input type="checkbox" name="member" value="borya">
			</td>
		</tr>
		<tr class="name">
			<td>Равшан</td>
			<td>
			<input type="checkbox" name="member" value="ravshan">
			</td>
		</tr>
	</table>
	<table id="colors">
		<tr class="color">
			<td>Жёлтый</td>
			<td>
				<input type="radio" name="color" value="yellow">
			</td>
		</tr>
		<tr class="color">
			<td>Синий</td>
			<td>
				<input type="radio" name="color" value="blue">
			</td>
		</tr>
		<tr class="color">
			<td>Зелёный</td>
			<td>
				<input type="radio" name="color" value="green">
			</td>
		</tr>
		<tr class="color">
			<td>Серый</td>
			<td>
				<input type="radio" name="color" value="gray">
			</td>
		</tr>
	</table>
	<input type="text" name="choosencolor" value="">
	<input type="submit" value="Выделить" id="submit">
</form>
<script type="text/javascript">

var button = document.getElementById('submit');

var checkboxes = document.getElementsByName('member');

var radios = document.getElementsByName('color');

var choosencolor = document.getElementsByName('choosencolor')[0];

for (var i = 0; i < radios.length; i++) {
	radios[i].onchange = function(e){
		choosencolor.value = this.value;
	}
}

button.onclick = confirm;

function confirm(event){
	event.preventDefault();
	for (var i = 0; i < checkboxes.length; i++) {
		if(checkboxes[i].checked){
			checkboxes[i].parentNode.parentNode.setAttribute('style', 'background:'+ choosencolor.value + ';');
		}
	}
}

</script>

Sigizmund2012 04.05.2015 15:52

Немного доработал код:
var button = document.getElementById('submit');

var checkboxes = document.getElementsByName('member');

var radios = document.getElementsByName('color');

var choosencolor = document.getElementsByName('choosencolor')[0];

for (var i = 0; i < radios.length; i++) {
	radios[i].onchange = function(e){
		choosencolor.value = this.parentNode.previousElementSibling.innerHTML;
	}
}

button.onclick = confirm;

function confirm(event){
	event.preventDefault();
	var checkValue;
	for (var j = 0; j < radios.length; j++) {
		if(radios[j].checked){
			checkValue = radios[j].value;
		}
	}
	for (var i = 0; i < checkboxes.length; i++) {
		if(checkboxes[i].checked){
			checkboxes[i].parentNode.parentNode.setAttribute('style', 'background:'+ checkValue + ';');
		}
	}
}

Настена 10.05.2015 13:21

Спасииибо тебе огромное,очень помог!!!;)


Часовой пояс GMT +3, время: 06:30.