Tables are manipulated through JavaScript

Use JavaScript to do some operations on forms

Target requirement

As shown in the figure, new data is added to the form by filling in the form. In addition, the added data can be modified or deleted.

Decision Events in Selection Box

function selAll()
{
	var checkAll = document.getElementsByName("selAll");
	var check = document.getElementsByName("sel");
	if(checkAll[0].checked)
	{
		for(var i=0;i<check.length;i++)
		{
			check[i].checked = true;
		}
	}
	else
	{
		for(var i=0;i<check.length;i++)
		{
			check[i].checked = false;
		}
	}
}

function sel()
{
	var checkAll = document.getElementsByName("selAll");
	var check = document.getElementsByName("sel");
	var i = 0;
	for(;i<check.length;i++)
	{
		if(check[i].checked==false)
		{
			checkAll[0].checked = false;
			break;
		}
	}
	if(i==check.length)
	{
		checkAll[0].checked = true;
	}
}

Add to

1. Obtaining table entity objects by ID

2. Adding a new row to the corresponding place by insertRow(int row) method of the table

3. Get the attribute values in the form by ID

4. Data insertion using a new line of insertCell(int cell) method and innerHTML method

function addItem()
{
	var table = document.getElementById('table');
	var len=table.rows.length;
	var row=table.insertRow(len);
	
	var number = document.getElementById('number').value;
	var name = document.getElementById("name").value;
	var sex = document.getElementsByName('sex');
	var age = document.getElementById('age').value;
	
	//Inner HTML comes with parsing
	row.insertCell(0).innerHTML="<input type='checkbox' name='sel' οnclick='sel()' />";
	row.insertCell(1).innerHTML=number;
	row.insertCell(2).innerHTML=name;
	row.insertCell(3).innerHTML=sex[0].checked==true?sex[0].value:sex[1].value;
	row.insertCell(4).innerHTML=age;
	//this.parentNode.parentNode gets its row
	row.insertCell(5).innerHTML=
    "<a href=# Nclick='delItem (this. parentNode. parentNode)'> Delete </a> “
	+"<a href=# Nclick='updateItem (this. parentNode. parentNode)'> Modification</a>“;
	
	//If you add a new line, you will not have a full selection, or you can modify it directly.
	sel();
}

The other methods are similar, paste the code directly.

delete

function delItem(currentRow)
{
	var table = document.getElementById('table');
	if(confirm("Are you sure to delete?")){
		table.deleteRow(currentRow.rowIndex);
	}
	//Delete a line, and maybe the rest is the full selection
	sel();
}

Modify and save

function updateItem(currentRow)
{
	var table = document.getElementById('table');
	var cells=currentRow.cells;
	
	for(var i=1;i<cells.length;i++){
		if(i==cells.length-1){
			cells[i].innerHTML=
			"<a href=# Nclick='delItem (this. parentNode. parentNode)'> Delete </a> “
			+"<a href=# Nclick='save Item (this. parentNode. parentNode)'> Save</a>“;
		}
		else{
			var oldValue=cells[i].innerText;
			cells[i].innerHTML="<input type=text  value="+oldValue+" />";
		}
		
	}
}

function saveItem(currentRow)
{
	var table = document.getElementById('table');
	var cells=currentRow.cells;
	
	for(var i=1;i<cells.length;i++){
		if(i==cells.length-1){
			cells[i].innerHTML=
			"<a href=# Nclick='delItem (this. parentNode. parentNode)'> Delete </a> “
			+"<a href=# Nclick='updateItem (this. parentNode. parentNode)'> Modification</a>“;
		}
		else{
			var value=cells[i].firstChild.value;
			cells[i].innerHTML=value;
		}
	}
}

Content of index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
        <title></title>
		<script src="js/create_table.js"></script>
	</head>
	<body>
		<table border='1' id="table" align="center">
			<tr>
				<th>Choice</th>
				<th>Student ID</th>
				<th>Full name</th>
				<th>Gender</th>
				<th>Age</th>
				<th>operation</th>
			</tr>
			<tr>
				<td><input type="checkbox" name="selAll" onclick="selAll()" /> </td>
				<td colspan="5">select all</td>
			</tr>
		</table>
		<hr />
		<table border='1' align="center">
			<tr>
				<td>Please enter your student number.</td>
				<td><input type='text' placeholder='Enter an 11-digit numeric number' id="number"/></td>
			</tr>
			<tr>
				<td>Please input your name.</td>
				<td><input type='text' placeholder='Input name' id="name"/></td>
			</tr>
			<tr>
				<td>Please choose sex.</td>
				<td><input type='radio' name='sex' value='male' checked='true'/>male
				<input type='radio' name='sex' value='female'/>female</td>
			</tr>
			<tr>
				<td>Please choose your age.</td>
				<td><input type='number' value='20' id="age"/></td>
			</tr>
			<tr>
				<td></td>
				<td><button type='submit' onclick='addItem()'/>Determine
				<button type='reset'/>Reset</td>
			</tr>
		</table>
	</body>
</html>

Of course, this method is not perfect, without a database, the data will disappear if the page is refreshed, which needs to be improved.

Keywords: Javascript Attribute REST Database

Added by scott56hannah on Thu, 10 Oct 2019 06:18:46 +0300

Programming VIP