1

Regards, I can not figure out how to enter the table in the section it belongs to. As you can see, it prints me one below the other, and I want to create within the created "tr" and so many "td" how many fields I have in the input field. Using this code, he creates "tr" and within it there is only one 'td' and so for both input fields, but I want to create a 'tr' for each click, in which two fields are placed in 'td' separately .

My table: https://prnt.sc/kyi54g

const form 		= document.querySelector('form');
	const table 	= document.querySelector('tbody');
	const button 	= document.querySelector('#clear-button');
	const inputName = document.getElementById('name');
	const inputAge 	= document.getElementById('age');
	
	// Zamenjuje if..else (if = ?) (else = :)
	let itemsArray 	= localStorage.getItem('items') ? JSON.parse(localStorage.getItem('items')) : [];

	localStorage.setItem('items', JSON.stringify(itemsArray));
	const data = JSON.parse(localStorage.getItem('items'));

	const thMaker = (text) => {
			const tr = document.createElement('tr');
			const td = document.createElement('td');
			td.innerHTML = text;
			table.append(tr);
			tr.appendChild(td);



            // var row   		= table.insertRow(-1);
            // var cell1 		= row.insertCell(0);
            // var cell2 		= row.insertCell(1);
 
            // cell1.innerHTML = text;
            // cell2.innerHTML = text;        
            
	}




	form.addEventListener('submit', function (e) {
		e.preventDefault();

		itemsArray.push(inputName.value);
		itemsArray.push(inputAge.value);
		localStorage.setItem('items', JSON.stringify(itemsArray));

		thMaker(inputName.value, inputAge.value);
		inputName.value = "";
		inputAge.value = "";
	

	});



	data.forEach(item => {
	  thMaker(item);
	});
<html>
<body>

<div id="addRow">

<form method="post" id="form-table">
		String
	<input type="text" id="name" name="text4">
		Number
	<input type="number" id="age" name="text5">

	<input type="submit" name="submit">  <!-- Submit dugme - **** PROBLEM: Refreshuje stranicu **** -->

</form>
	
</div>


<!-- TABELA -->
<div id="download-excel">
	<table id="myTable" class="t01">
	    <tr>
	        <th>
	            Name
	        </th>
	        <th>
	            Age
	        </th>
	    </tr>

	</table>
</div>

</body>
</html>

Improve this question
2
  • You need to add two <td> tags inside one <tr>. Commented Sep 25, 2018 at 13:20
  • So somehow, but I have to add as much <td> to <tr> as I have input fields. Commented Sep 25, 2018 at 13:27

3 Answers 3

Reset to default
2

You have to save an array of object not a simple array.
Like this:

let itemsArray = [{name: "Pippo", age: "12"},{"name": "Pluto", "age": "20"}];



I removed localStorage from my solution to work in the snippet.

const form 		= document.querySelector('form');
	const table 	= document.querySelector('tbody');
	const button 	= document.querySelector('#clear-button');
	const inputName = document.getElementById('name');
	const inputAge 	= document.getElementById('age');
	
	// Zamenjuje if..else (if = ?) (else = :)
	let itemsArray 	= [{name: "Pippo", age: "12"},{"name": "Pluto", "age": "20"}];
	const data = itemsArray;

	const thMaker = (item) => {
			const tr = document.createElement('tr');
			table.append(tr);
      
			const td1 = document.createElement('td');
			td1.innerHTML = item.name;
			tr.appendChild(td1);
			const td2 = document.createElement('td');
			td2.innerHTML = item.age;
			tr.appendChild(td2);
            
	}


	form.addEventListener('submit', function (e) {
		e.preventDefault();

    var newItem = {name: inputName.value, age: inputAge.value};
		itemsArray.push(newItem);

		thMaker(newItem);
		inputName.value = "";
		inputAge.value = "";
	

	});

	data.forEach(item => {
	  thMaker(item);
	});
<html>
<body>

<div id="addRow">

<form method="post" id="form-table">
		String
	<input type="text" id="name" name="text4">
		Number
	<input type="number" id="age" name="text5">

	<input type="submit" name="submit">  <!-- Submit dugme - **** PROBLEM: Refreshuje stranicu **** -->

</form>
	
</div>


<!-- TABELA -->
<div id="download-excel">
	<table id="myTable" class="t01">
	    <tr>
	        <th>
	            Name
	        </th>
	        <th>
	            Age
	        </th>
	    </tr>

	</table>
</div>

</body>
</html>

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

Check out the HTMLTableElement's methods:

HTMLTableElement.createTHead()

Returns an HTMLElement representing the first that is a child of the element. If none is found, a new one is created and inserted in the tree immediately before the first element that is neither a , nor a , or as the last child if there is no such element.

HTMLTableElement.deleteTHead()

Removes the first that is a child of the element.

HTMLTableElement.createTFoot()

Returns an HTMLElement representing the first that is a child of the element. If none is found, a new one is created and inserted in the tree immediately before the first element that is neither a , a , nor a , or as the last child if there is no such element.

HTMLTableElement.deleteTFoot()

Removes the first that is a child of the element.

HTMLTableElement.createCaption()

Returns an HTMLElement representing the first that is a child of the element. If none is found, a new one is created and inserted in the tree as the first child of the element.

HTMLTableElement.deleteCaption()

Removes the first that is a child of the element.

HTMLTableElement.insertRow()

Returns an HTMLTableRowElement representing a new row of the table. It inserts it in the rows collection immediately before the element at the given index position. If necessary a is created. If the index is -1, the new row is appended to the collection. If the index is smaller than -1 or greater than the number of rows in the collection, a DOMException with the value IndexSizeError is raised.

HTMLTableElement.deleteRow()

Removes the row corresponding to the index given in parameter. If the index value is -1 the last row is removed; if it smaller than -1 or greater than the amount of rows in the collection, a DOMException with the value IndexSizeError is raised.

See also HTMLTableRowElement#insertCell

HTMLTableRowElement.insertCell()

Inserts a new cell just before the given position in the row. If the given position is not given or is -1, it appends the cell to the row. If the given position is greater (or equal as it starts at zero) than the amount of cells in the row, or is smaller than -1, it raises a DOMException with the IndexSizeError value. Returns a reference to a HTMLTableCellElement [en-US].

Improve this answer

Comments

0

by the looks of it, the thMaker creates a single td element. Also, the function definition you posted only takes a single parameter.

The solution would be to have the thMaker function create two td elements, and also to use two parameters.

Suggestion: rename the "thMaker" to "trMaker" since it's not creating a "table heading" but a "table row" - tr element.

Here's an example solution:

const trMaker = (name, age) => {
            const tr = document.createElement('tr');
            tr.innerHTML = `<td>${name}</td><td>${age}</td>`;
            table.append(tr);            
    }
Improve this answer

2 Comments

How does it keep me preserved and refreshing the page?
I'm not sure what exactly you mean: since your event listener uses preventDefault() it will not refresh the page upon submit. And since you're storing items in localStorage, the page will "remember" the data entered.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.