js operation form
This time I will bring you js operation form. What are the precautions for js operation form? Here is a practical case, let’s take a look.
Implementation ideas:
1. When adding: Get the number of rows in the current list and add the next row to the current row;
2. Use the insertCell() method to add a row, and the subscript starts from 0.
3. If you want to add a type to a new row . To respond to events, use the setAttribute() method, similar to a key-value pair, and use the appendChild() method to save the data to a new row
4. When deleting: Get the current number of rows to be deleted, this, and then get the parent node , delete the entire row remove(), instead of just deleting a single data of a certain row
5. When modifying: Get the row number index of the currently modified row. When clicking modify, convert the table status to text format, and Change "Modify" to "Confirm"
Implementation code:
<!DOCTYPE html>
<html>
<head>
<metacharset="UTF-8">
<title></title>
<style>
table{
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
width: 400px;
}
td,th{
border-right:1px solid #ccc ;
border-bottom: 1px solid #ccc;
}
</style>
<script>
function add(){
var table = document.getElementById("order");
var index = table.rows.length;//表格行数
var row = table.insertRow(index);//插入一个行并返回新一行
var c0 = row.insertCell(0);
var b0 = document.createElement("input");
b0.setAttribute("type","checkbox");
b0.setAttribute("onclick","seclect("+index+")");
b0.setAttribute("name","sel");
c0.appendChild(b0);
var c1 = row.insertCell(1);//在新一行插入一列，并返回新一列
c1.innerHTML = prompt("请输入商品名称","");
var c2 = row.insertCell(2);//在新一行插入一列，并返回新一列
c2.innerHTML = prompt("输入数量","");
var c3 = row.insertCell(3);//在新一行插入一列，并返回新一列
c3.innerHTML = prompt("输入价格","");
var c4 = row.insertCell(4);
var b1 = document.createElement("input");
b1.setAttribute("type","button");
b1.setAttribute("value","删除");
b1.setAttribute("onclick","del(this)");
var b2 = document.createElement("input");//创建按钮
b2.setAttribute("type","button");
b2.setAttribute("value","修改");
b2.setAttribute("style","margin-left: 5px");
b2.setAttribute("onclick","update("+index+")");
c4.appendChild(b1);//把按钮添加到操作的单元格中
c4.appendChild(b2);
}
function del(but){
//var table = document.getElementById("order");
but.parentNode.parentNode.remove();//根据节点的层级关系删除行
}
function update(index){
var table = document.getElementById("order");
//获得修改按钮
var cell=table.rows[index].cells[4];
cell.lastChild.setAttribute("value","确定");
//为按钮重新绑定事件
cell.lastChild.setAttribute("onclick","edit("+index+")");
//修改数量
var cellNumer = table.rows[index].cells[2];
var txt = document.createElement("input"); //创建一个文本框
txt.setAttribute("value",cellNumer.innerHTML);//设置文本框的值
txt.setAttribute("size",5);//文本框长度
cellNumer.innerHTML = "";//把单元格的数据清除
cellNumer.appendChild(txt); //把文本框加入到单元格
}
function edit(index){
var table = document.getElementById("order");
var cell = table.rows[index].cells[4];
cell.lastChild.setAttribute("value","修改");
cell.lastChild.setAttribute("onclick","update("+index+")");
//把单元格中的文本框删除
var cellNumer = table.rows[index].cells[2];
var num = cellNumer.firstChild.value;//取文本框的值
cellNumer.removeChild(cellNumer.firstChild);//删除文本框
cellNumer.innerHTML = num;
}
function allSelect(ch){
var item = document.getElementsByTagName("input"); //取所有的input标签
for(var i=0;i<item.length;i++){ //循环每一个
if(item[i].type==ch.type){ //判断每一个标签的类型是否为CheckBox
item[i].checked= ch.checked; //复选框的选中与全选的复选框选中相同
}
}
}
function seclect(sh){
varitem=document.getElementsByName("sel");
varall=document.getElementById("all");
vartag=true;
for(vari=0;i<item.length;i++){//判断是否全部选中
if(item[i].checked == false){
tag=false;
break;
}
}
all.checked=tag;
}
</script>
</head>
<body>
<center>
<tableid="order">
<tr>
<th>
<inputtype="checkbox"onclick="allSelect(this)"id="all"/>全选
</th>
<th>商品名称</th>
<th>数量</th>
<th>单价</th>
<th>操作</th>
</tr>
<tr>
<td><inputtype="checkbox"onclick="seclect(this)"name="sel"/></td>
<td>娃哈哈</td>
<td>10</td>
<td>2</td>
<td><inputvalue="删除"type="button"onclick="del(this)"style="margin-right:5px ;"/><inputvalue="修改"type="button"onclick="update(1)"/></td>
</tr>
</table>
<buttononclick="add()">添加商品</button>
</center>
</body>
</html>I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!
Recommended reading:
js implementation of image carousel on mobile terminal
Detailed explanation of the use of Vue scope slots
The above is the detailed content of js operation form. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Steps to adjust the format of pictures inserted in PPT tables
Mar 26, 2024 pm 04:16 PM
1. Create a new PPT file and name it [PPT Tips] as an example. 2. Double-click [PPT Tips] to open the PPT file. 3. Insert a table with two rows and two columns as an example. 4. Double-click on the border of the table, and the [Design] option will appear on the upper toolbar. 5. Click the [Shading] option and click [Picture]. 6. Click [Picture] to pop up the fill options dialog box with the picture as the background. 7. Find the tray you want to insert in the directory and click OK to insert the picture. 8. Right-click on the table box to bring up the settings dialog box. 9. Click [Format Cells] and check [Tile images as shading]. 10. Set [Center], [Mirror] and other functions you need, and click OK. Note: The default is for pictures to be filled in the table
How to make a table for sales forecast
Mar 20, 2024 pm 03:06 PM
Being able to skillfully make forms is not only a necessary skill for accounting, human resources, and finance. For many sales staff, learning to make forms is also very important. Because the data related to sales is very large and complex, and it cannot be simply recorded in a document to explain the problem. In order to enable more sales staff to be proficient in using Excel to make tables, the editor will introduce the table making issues about sales forecasting. Friends in need should not miss it! 1. Open [Sales Forecast and Target Setting], xlsm, to analyze the data stored in each table. 2. Create a new [Blank Worksheet], select [Cell], and enter [Label Information]. [Drag] downward and [Fill] the month. Enter [Other] data and click [
How to set WPS value to automatically change color according to conditions_Steps to set WPS table value to automatically change color according to condition
Mar 27, 2024 pm 07:30 PM
1. Open the worksheet and find the [Start]-[Conditional Formatting] button. 2. Click Column Selection and select the column to which conditional formatting will be added. 3. Click the [Conditional Formatting] button to bring up the option menu. 4. Select [Highlight conditional rules]-[Between]. 5. Fill in the rules: 20, 24, dark green text with dark fill color. 6. After confirmation, the data in the selected column will be colored with corresponding numbers, text, and cell boxes according to the settings. 7. Conditional rules without conflicts can be added repeatedly, but for conflicting rules WPS will replace the previously established conditional rules with the last added rule. 8. Repeatedly add the cell columns after [Between] rules 20-24 and [Less than] 20. 9. If you need to change the rules, you can just clear the rules and then reset the rules.
PyCharm usage tutorial: guide you in detail to run the operation
Feb 26, 2024 pm 05:51 PM
PyCharm is a very popular Python integrated development environment (IDE). It provides a wealth of functions and tools to make Python development more efficient and convenient. This article will introduce you to the basic operation methods of PyCharm and provide specific code examples to help readers quickly get started and become proficient in operating the tool. 1. Download and install PyCharm First, we need to go to the PyCharm official website (https://www.jetbrains.com/pyc
Do you know how to sum a Word table?
Mar 21, 2024 pm 01:10 PM
Sometimes, we often encounter counting problems in Word tables. Generally, when encountering such problems, most students will copy the Word table to Excel for calculation; some students will silently pick up the calculator. Calculate. Is there a quick way to calculate it? Of course there is, in fact the sum can also be calculated in Word. So, do you know how to do it? Today, let’s take a look together! Without further ado, friends in need should quickly collect it! Step details: 1. First, we open the Word software on the computer and open the document that needs to be processed. (As shown in the picture) 2. Next, we position the cursor on the cell where the summed value is located (as shown in the picture); then, we click [Menu Bar
Linux Deploy operation steps and precautions
Mar 14, 2024 pm 03:03 PM
LinuxDeploy operating steps and precautions LinuxDeploy is a powerful tool that can help users quickly deploy various Linux distributions on Android devices, allowing users to experience a complete Linux system on their mobile devices. This article will introduce the operating steps and precautions of LinuxDeploy in detail, and provide specific code examples to help readers better use this tool. Operation steps: Install LinuxDeploy: First, install
What to do if you forget to press F2 for win10 boot password
Feb 28, 2024 am 08:31 AM
Presumably many users have several unused computers at home, and they have completely forgotten the power-on password because they have not been used for a long time, so they would like to know what to do if they forget the password? Then let’s take a look together. What to do if you forget to press F2 for win10 boot password? 1. Press the power button of the computer, and then press F2 when turning on the computer (different computer brands have different buttons to enter the BIOS). 2. In the bios interface, find the security option (the location may be different for different brands of computers). Usually in the settings menu at the top. 3. Then find the SupervisorPassword option and click it. 4. At this time, the user can see his password, and at the same time find the Enabled next to it and switch it to Dis.
How to switch tables horizontally and vertically in word
Mar 20, 2024 am 09:31 AM
Word software is indispensable to us and needs to be used frequently. I have learned how to edit tables using Word software before. However, if I accidentally edit the table in the horizontal and vertical directions, and I don’t want to waste time re-creating it, is it possible to change the horizontal and vertical directions of the table? Woolen cloth? The answer is of course yes. Next, the editor will introduce to you in detail how to swap tables horizontally and vertically in Word. Let us learn together. First, we need to swap the rows and columns of the Word table below. To do this, we need to first select the table entirely, then right-click and select the copy function. Step 2: After selecting copy, we minimize word, then open an Excel table, right-click, select paste, and paste it into Exc
