Catalog
2. Get objects and traverse arrays
3. Implementing Additional Functions
4. Implement Deletion Function
5. Implementing Modification Functions
thinking
First, I think it's easy to understand. First, we create an array and put some object data in it. Then we get the object by traversing the array and put it in the corresponding table. Then we add function, get the value of the corresponding input box, save it in an object, and push it through the array functionStored objects are added to the array, then the original table is removed and then the array is traversed again. The idea of deleting modifications and queries is similar, that is, by manipulating the array, refining the table, and traversing again. Say nothing more, just code!
1. Layout
Layout the page with labels first
<body> <div class="nav"> <input type="text" class="form-control" placeholder="Please enter information for the query" /> <button type="button" class="btn btn-primary" onclick="vagueSel()">query</button> </div> <div class="box1"> <form action="" method=""> <span>Full name</span> <input type="text" class="form-control" /> <span>Age</span> <input type="number" class="form-control" /> <span>Gender</span> <input type="text" class="form-control" /> <span>School Number</span> <input type="number" class="form-control" /><br> <button type="button" class="btn btn-success" onclick="add()">Add to</button> </form> </div> <div class="box2"> <table border="2" class="box"> <thead> <tr> <th>Sequence Number</th> <th>Full name</th> <th>Age</th> <th>Gender</th> <th>School Number</th> <th colspan="4">operation</th> </tr> </thead> </table> </div> </body>
2. Get objects and traverse arrays
1. Storing data in an array is a convenient way to traverse the array and see the effect on the page.
var inp = document.querySelectorAll('input');
var box = document.querySelector('.box');
var inputs = document.querySelectorAll('input');
var btn = document.querySelectorAll('button');
var strArr = [
{
name:'Zhang San',
age:'18',
sex:'male',
stuId:'202101'
},
{
name:'Li Si',
age:'20',
sex:'female',
stuId:'202102'
},
{
name:'King Five',
age:'22',
sex:'male',
stuId:'202103'
},
{
name:'Zhao Six',
age:'24',
sex:'female',
stuId:'202104'
}
];2. Traverse Arrays (Key)
1) Create a table: first create the tbody node, why create the tbody node, we will wait. First create it, then call a function to create the table through a for loop. This table is created according to the length of the array, how many rows of data are created. The first parameter passed in is the length of the array + 1, which is used for the first column of the tableOrder. The second parameter is the created tbody node, which is used to add rows later.
2) Fill in data: as mentioned above, once you have created a table, you then iterate through the data to fill the corresponding cells.
Get all the TRS from document.querySelectorAll and fill each cell with data through a for loop. Here's why the for loop starts from 1 and our table header is also tr. We don't need to change its content, all I start from 1 and modify the table body directly. Then talk about tr[i].children[1].innerHTML = strArr[i-1].name;Why do arrays need i-1? Arrays are traversed, subscripts start with 0, and all need I-1 to not miss data. There are some puzzles among little partners, are the array objects not globally defined? Why do you want to pass in functions as arguments? I'll buy a shutdown here and come back later.
disAllStr(strArr);
// Traverse the array and display it in the table
function disAllStr(strArr) {
var tbody = document.createElement('tbody');
box.appendChild(tbody);
for(var i = 0; i < strArr.length; i++) {
createTable(i+1,tbody);
}
var tr = document.querySelectorAll('tr');
for(var i = 1; i < strArr.length+1; i++) {
tr[i].children[1].innerHTML = strArr[i-1].name;
tr[i].children[2].innerHTML = strArr[i-1].age;
tr[i].children[3].innerHTML = strArr[i-1].sex;
tr[i].children[4].innerHTML = strArr[i-1].stuId;
tr[i].children[5].innerHTML = "<button class='btn btn-danger' onclick='del()'>delete</button>";
tr[i].children[6].innerHTML = "<button class='btn btn-primary' onclick='edit()'>edit</button>";
tr[i].children[7].innerHTML = "<button class='btn btn-info' onclick='up()'><span class='glyphicon glyphicon-chevron-up'></span></button>";
tr[i].children[8].innerHTML = "<button class='btn btn-info' onclick='down()'><span class='glyphicon glyphicon-chevron-down'></span></button>";
}
}
// Create a table table table
function createTable(j,tbody) {
var trs = document.createElement('tr');
tbody.appendChild(trs);
var td = document.createElement('td');
trs.appendChild(td);
td.innerHTML = j;
for(var i=0;i<8;i++){
var tds = document.createElement('td');
trs.appendChild(tds);
}
}
3. Implementing Additional Functions
Here we will talk about how to implement the add function. It is very simple to get the value in the input box, then save it into an object, and then add the object to the array.
1) inp is the earliest global variable that gets all the input labels for the entire page. Put the values in the input input box into an object obj.
2) Use a for loop to ensure that each input box has a value and cannot be empty. If it is empty, pop up a prompt box, exit the function directly, and do not execute the next content.
3) Use if judgment to ensure that the number is unique and cannot be repeated.
// Add functionality
function add() {
var strObj = {
name:inp[1].value,
age:inp[2].value,
sex:inp[3].value,
stuId:inp[4].value
}
for(var i = 1; i < inp.length; i++) {
if(inp[i].value == "" || inp[i].value == null || inp[i].value == undefined) {
alert('Please complete the content!');
return false;
}
}
if(check(inp[4].value)) {
alert('The number already exists!');
return false;
}
strArr.push(strObj);
clear();
disAllStr(strArr);
}4) Pass in the value in the Entry Number input box before calling the function, and make a judgment first. If the length of the array is less than 1, that is, when the array is empty, return false directly. When the length is greater than 1, execute the following loop, find the corresponding value in the array, and return true. Then the if judgment above will execute, pop up a prompt box, and stop execution.
// Choose whether to add based on id
function check(id) {
if(strArr.length < 1) return false;
for(var i = 0; i < strArr.length; i++) {
if(strArr[i].stuId === id){
return true;
}
}
return false;
}5) Continue executing the next code without stopping execution. Add the data obtained above to the last item of the array.
6) Let's talk about the clear() event here, and why we want to create a tbody node. That's why it's easy for us to get it. We remove the tbody, and the table body is clean, then we update the table by iterating through the array of added data again.
// Clear tbody
function clear() {
var tbody = document.querySelector('tbody');
tbody.remove();
}4. Implement Deletion Function
It's easiest for me to delete the function personally. My method is to get the parent of his parent by getting the element that currently gets the focus, and the row of this table as well. Because the number is unique, I make a judgment by getting the number inside the number column. I also do a for loop to find the object corresponding to the number in the array and get it under the array.Then clear the main contents of the table and re-iterate the array after deleting the data.
// delete
function del() {
var trs = document.activeElement.parentElement.parentElement;
var id = trs.children[4].innerText;
for(var i = 0; i < strArr.length; i++) {
if(strArr[i].stuId === trs.children[4].innerText) {
strArr.splice(i,1);
}
}
clear();
disAllStr(strArr);
}5. Implementing Modification Functions
This function is a bit more, so there will be a bit more content. Click the Edit button, change the cell to an input input box, and click Edit again to echo the data into the input input box outside. Click the Update button to save the modified data.
1) Same principle, get the action line, get all button buttons in the current line in the action line. Modify button button property value to add event, modify style.
2) Display the table table table cell data in the input box of the table table table through a for loop.
// edit
function edit() {
var trs = document.activeElement.parentElement.parentElement;
var btn = trs.querySelectorAll('button');
for(var i = 1; i < 5; i++) {
var inputs = document.createElement('input');
inputs.setAttribute('type','text');
inputs.style.width = "80%";
inputs.value = trs.children[i].innerText;
trs.children[i].innerHTML = "";
trs.children[i].appendChild(inputs);
}
var inp = trs.querySelectorAll('input');
inp[3].setAttribute('disabled','true');
btn[0].getAttributeNode('class').value = 'btn btn-primary';
btn[0].getAttributeNode('onclick').value = 'editToInp()';
btn[0].innerHTML = "edit";
btn[1].getAttributeNode('class').value = 'btn btn-danger';
btn[1].getAttributeNode('onclick').value = 'editToArr()';
btn[1].innerHTML = "To update";
}3) Let's talk about echo data in the input input box outside. First get all the input in the table, which is named inps. Avoid conflicting with the global variable inputs, and then assign values to the input outside through a for loop. It's important to note that all the elements'subscripts are not misplaced, otherwise the order will not fit.
4) Another point is that the number must be set as unmodifiable, because all our data is operated on according to the number. Once the number is modified, the content will be completely confused.
// Modify data echo to input
function editToInp() {
var trs = document.activeElement.parentElement.parentElement;
var inps = trs.querySelectorAll('input');
for(var i = 1; i < 5; i++) {
inputs[i].value = inps[i-1].value;
}
inputs[4].setAttribute('disabled','true');
btn[1].getAttributeNode('onclick').value = "editToArr()";
btn[1].setAttribute('style','background-color: skyblue;');
btn[1].innerHTML = "To update";
}5) This is where the modified data is stored in the array. First, the modified data is stored in an obj object. Similarly, the changeable input box cannot be empty. Here we will focus on the forEach function that we defined.
// Modify Data to Array
function editToArr() {
var trs = document.activeElement.parentElement.parentElement;
var input = trs.querySelectorAll('input');
var obj = {
name:input[0].value,
age:input[1].value,
sex:input[2].value,
stuId:input[3].value
}
for(var i = 0; i <input.length; i++) {
if(input[i].value == "" || input[i].value == null || input[i].value == undefined) {
alert('Please complete the information!');
return false;
}
}
var i = forEach(input[3].value);
strArr.splice(i,1,obj);
clear();
disAllStr(strArr);
for(var i = 1; i < 5; i++) {
inputs[i].value = "";
}
btn[1].getAttributeNode('onclick').value = "add()";
btn[1].removeAttribute('style');
btn[1].innerHTML = "Add to";
inputs[4].removeAttribute('disabled');
}6) A pupil number is passed in, which cannot be modified and is unique. The position of the first occurrence of the pupil number is determined by the for loop if. The subscript value of the corresponding array is returned, and then the data of the array is modified by the subscript.
7) The modified array, again by clearing the body of the table, then traversing the array again to get a new table.
function forEach(id) {
for(var i = 0; i < strArr.length; i++) {
if(strArr[i].stuId.indexOf(id)+1) {
return i;
}
}
return -1;
}6. Move up and down
Move up and down the same way, the only difference is whose value the temporary variable has. Same way, get the current row and get the array subscript through forEach. If the subscript is 0, which is the first data in the array, then he doesn't need to move up, pop up a prompt box and stop execution. If not, move forward.A row's value is assigned to the TEM temporary variable, the current row's value is assigned to the previous row, and the tem's value is assigned to the current row, which completes the data shift. Similarly, the table is cleared and traversed.
//Move up
function up() {
var trs = document.activeElement.parentElement.parentElement;
var i = forEach(trs.children[4].innerText)
if(i === 0) {
alert('The student is at the top!');
return false;
}
var temObj = strArr[i-1];
strArr[i-1] = strArr[i];
strArr[i] = temObj;
clear();
disAllStr(strArr);
}
// Move Down
function down() {
var trs = document.activeElement.parentElement.parentElement;
var i = forEach(trs.children[4].innerText)
if(i === strArr.length-1) {
alert('The student is at the bottom!');
return false;
}
var temObj = strArr[i+1];
strArr[i+1] = strArr[i];
strArr[i] = temObj;
clear();
disAllStr(strArr);
}7. Implementing Fuzzy Query
The last function is to implement the fuzzy query. Enter any value in the input box to find the qualified data.
1) Create a temporary array
2) By traversing the array, qualified data is found in the array and subscripts are returned.
3) Find the array in the original array and add it to the temporary array.
4) Clear the table. Here, there are keys to tell you what you sold before and why you should pass in the function by passing in a parameter. By passing in a new array into the function and traversing it, you can get a table that queries the information.
// Fuzzy Query
function vagueSel() {
var temArr = [];
var str = inputs[0].value;
for(var i = 0; i < strArr.length; i++) {
if(strArr[i].name.indexOf(str)+1 || strArr[i].age.indexOf(str)+1 || strArr[i].sex.indexOf(str)+1 || strArr[i].stuId.indexOf(str)+1) {
temArr.push(strArr[i]);
}
}
clear();
disAllStr(temArr);
}Finally, these functions are implemented, the last operation video is ready. All functions are called by onclick in the label, and many places can be re-encapsulated to reduce the amount of code. Ignore that after modifying the data, the fourth input box is disabled and has been repaired. Finally, the front-end is small white, everyone work together to rush!