在JavaScript中创建表格行和单元格

时间：2018-09-25 13:13:15

标签： javascript html json

关于，我不知道如何在它所属的部分中输入表格。如您所见，它使我一个接一个地打印，我想在创建的“ tr”和这么多“ td”中创建输入字段中有多少字段。他使用此代码创建“ tr”，并且其中只有一个“ td”，因此对于两个输入字段，但是我想为每次单击创建一个“ tr”，其中两个字段分别放置在“ td”中

我的桌子：https://prnt.sc/kyi54g 

public class ViewModel : INotifyPropertyChanged
{
    private ObservableCollection<string> _monthDaysList;
    public ObservableCollection<string> MonthDaysList
    {
        get { return _monthDaysList; }
        internal set { _monthDaysList = value; OnPropertyChanged(); }
    }


    private string _selectedMonthDay;
    public string SelectedMonthDay
    {
        get { return _selectedMonthDay; }
        internal set { _selectedMonthDay = value; OnPropertyChanged(); }
    }

    public void GetMonths()
    {
        MonthDaysList = new ObservableCollection<string>();
        if (MyConceptItems != null && MyConceptItems.Any())
        {
            foreach (var item in MyConceptItems)
            {
                MonthDaysList.Add(item.DateColumn);
            }
            SelectedMonthDay = MonthDaysList[0];
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged([CallerMemberName] String propertyName = "")
    {
        if (PropertyChanged != null)
            PropertyChanged.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

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);
	});

3 个答案:

答案 0 :(得分：1)

您必须保存对象数组，而不是简单的数组。
像这样：

let itemsArray = [{name：“ Pippo”，age：“ 12”}，{“ name”：“ Pluto”，“ age”：“ 20”}];



我从解决方案中删除了localStorage以便在代码段中工作。

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>

答案 1 :(得分：1)

签出HTMLTableElement's methods：

  

HTMLTableElement.createTHead（）

     

返回一个HTMLElement，它表示第一个元素的子元素。如果未找到，则创建一个新的元素，并将其插入树中紧接在第一个元素（既不是a，也不是a）之前的树中，或者作为最后一个子元素（如果没有此类元素的话）。      

HTMLTableElement.deleteTHead（）

     

删除第一个元素的子元素。

     

HTMLTableElement.createTFoot（）

     

返回一个HTMLElement，它表示第一个元素的子元素。如果未找到，则创建一个新元素，并将其插入到树中紧接在第一个元素既不是a，a，a还是第一个元素之前的树中；如果没有这样的元素，则作为最后一个子元素。      

HTMLTableElement.deleteTFoot（）

     

删除第一个元素的子元素。

     

HTMLTableElement.createCaption（）

     

返回一个HTMLElement，它表示第一个元素的子元素。如果未找到，则创建一个新对象，并将其作为元素的第一个子元素插入树中。

     

HTMLTableElement.deleteCaption（）

     

删除第一个元素的子元素。

     

HTMLTableElement.insertRow（）

     

返回表示表的新行的HTMLTableRowElement。它将其插入到行集合中紧接在给定索引位置的元素之前。如有必要，将创建一个。如果索引为-1，则将新行追加到集合中。如果索引小于-1或大于集合中的行数，则会引发一个值为IndexSizeError的DOMException。

     

HTMLTableElement.deleteRow（）

     

删除与参数中给定索引对应的行。如果索引值为-1，则删除最后一行；如果它小于-1或大于集合中的行数，则会引发一个值为IndexSizeError的DOMException。

另请参阅HTMLTableRowElement#insertCell

  

HTMLTableRowElement.insertCell（）

     

在行中给定位置之前插入一个新单元格。如果给定位置未给出或为-1，则它将单元格附加到该行。如果给定位置大于（或等于从零开始的位置）大于行中单元格的数量，或者小于-1，则它将引发带有IndexSizeError值的DOMException。返回对HTMLTableCellElement [en-US]的引用。

答案 2 :(得分：0)

根据外观，thMaker创建单个td元素。 另外，您发布的函数定义仅包含一个参数。

解决方案是让thMaker函数创建两个td元素，并使用两个参数。

建议：由于“ thMaker”不是创建“表格标题”而是创建“表格行”-tr元素，因此将其重命名为“ trMaker”。

这是一个示例解决方案：

const trMaker = (name, age) => {
            const tr = document.createElement('tr');
            tr.innerHTML = `<td>${name}</td><td>${age}</td>`;
            table.append(tr);            
    }
相关问题
最新问题