Форум

Jazer · #1 (**permalink**) 15.02.2017, 12:20

Всем привет.

JavaScript начал изучать не давно, так же как и HTML. На данный момент дошел до Объектной Модели Документа. Передо мной стоят две задачи: построить таблицу используя DOM.

1) Объединить ячейки по горизонтали.
2) Объединить ячейки по вертикали.

Таблицы 3x3

С первой задачей я справился и у меня получился такой код:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

</head>
<body>
	<p><button onclick='createTable()'>Добавить таблицу</button>
	<button onclick='removeTable()'>Удалить таблицу</button> <p>
	
	<script>
		function createTable(){
			tableTeg = document.createElement('table');
			tableTeg.setAttribute('border', 1);
			tableTeg.setAttribute('width', 300);
			document.body.appendChild(tableTeg);
			for (i=1; i<4; i++){
				tableTeg.appendChild(newTr=document.createElement('tr'));
						for (j=1; j<4; j++) {
						
								newTr.appendChild(newTd=document.createElement('td'));
								
								newTd.innerText = i+'.'+j;
								newTd.setAttribute('align','center');
							
							if (i==j) newTd.setAttribute('rowspan', 2);
						}
					document.body.appendChild(document.createElement('br'));
			}
		}
		
		function removeTable(){
		if (document.body.lastChild.tagName == 'TABLE' || document.body.lastChild.tagName == 'BR')
		for(i=0; i<2; i++)document.body.removeChild(document.body.lastChild);
		else alert('Таблиц нет. Удалять нечего.');
	}

	
		
	</script>

</body>

</html>

Со второй возникли проблемки, все ячейки начинают плавать. Можете пожалуйста подбросить идею.

рони · #2 (**permalink**) 15.02.2017, 13:11

Jazer,
может чем поможет ...

<table width="300" border="1">
    <tr>
        <td rowspan="2" align="center">1.1</td>
        <td align="center">1.2</td>
        <td align="center">1.3</td>
    </tr>
    <tr>
        <td rowspan="2" align="center">2.2</td>
        <td align="center">2.3</td>
    </tr>
    <tr>
        <td align="center">2.1</td>
        <td rowspan="2" align="center">3.3</td>
    </tr>
    <tr>
        <td align="center">3.1</td>
        <td align="center">3.2</td>

    </tr>
 </table>

Jazer · #3 (**permalink**) 15.02.2017, 13:17

Спасибо, сделал без цикла.
Только без цикла это не дело

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

</head>
<body>
	<p><button onclick='createTable()'>Добавить таблицу</button>
	<button onclick='removeTable()'>Удалить таблицу</button> <p>
	
	<script>
		
		
		function createTable(){
			tableTeg = document.createElement('table');
			tableTeg.setAttribute('border', 1);
			tableTeg.setAttribute('width', 300);
			document.body.appendChild(tableTeg);
			
			tableTeg.appendChild(newTr=document.createElement('tr'));
					
						newTr.appendChild(newTd=document.createElement('td'));
						newTd.innerText = '1.1';
						newTd.setAttribute('align','center');
						newTd.setAttribute('rowspan','2');
						
						newTr.appendChild(newTd=document.createElement('td'));
						newTd.innerText = '1.2';
						newTd.setAttribute('align','center');
						
						newTr.appendChild(newTd=document.createElement('td'));
						newTd.innerText = '2.3';
						newTd.setAttribute('align','center');
				
				tableTeg.appendChild(newTr=document.createElement('tr'));
						
						newTr.appendChild(newTd=document.createElement('td'));
						newTd.innerText = '2.2';
						newTd.setAttribute('align','center');
						newTd.setAttribute('rowspan','2');
						
						newTr.appendChild(newTd=document.createElement('td'));
						newTd.innerText = '2.3';
						newTd.setAttribute('align','center');
					
				tableTeg.appendChild(newTr=document.createElement('tr'));
					
						newTr.appendChild(newTd=document.createElement('td'));
						newTd.innerText = '2.1';
						newTd.setAttribute('align','center');
						
						newTr.appendChild(newTd=document.createElement('td'));
						newTd.innerText = '3.3';
						newTd.setAttribute('align','center');
						newTd.setAttribute('rowspan','2');
						
				tableTeg.appendChild(newTr=document.createElement('tr'));
						
						newTr.appendChild(newTd=document.createElement('td'));
						newTd.innerText = '3.1';
						newTd.setAttribute('align','center');
						
						newTr.appendChild(newTd=document.createElement('td'));
						newTd.innerText = '3.2';
						newTd.setAttribute('align','center');
			}
			
		
		
		
		function removeTable(){
		if (document.body.lastChild.tagName == 'TABLE'){
		document.body.removeChild(document.body.lastChild);
		} else  alert('Таблиц нет. Удалять нечего.');
	}

	
		
	</script>

</body>

</html>

рони · #4 (**permalink**) 15.02.2017, 13:28

Jazer,
занесите данные в массив и используйте цикл по массиву

рони · #5 (**permalink**) 15.02.2017, 13:54

Jazer,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">

 td{
 text-align: center;
 border: solid 1px #0000FF;
 }
 table {
border-collapse: collapse;
border: 1px solid #0000FF;
width: 300px;

}



 </style>

</head>

<body>
  <table></table>


<script>
var tabelTr = [
    [{rowSpan: "2",textContent: "1.1"}, {textContent: "1.2"}, {textContent: "1.3"}],
    [{rowSpan: "2",textContent: "2.2"}, {textContent: "2.3"}],
    [{textContent: "2.1"}, {rowSpan: "2",textContent: "3.3"}],
    [{textContent: "3.1"}, {textContent: "3.2"}]
];
var table = document.querySelector("table");
tabelTr.forEach(function(dataTds, indx) {
    var tr = table.insertRow(indx);
    dataTds.forEach(function(data, i) {
        var td = tr.insertCell(i);
        for (var k in data) td[k] = data[k]
    })
});
</script>

</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript