前言
欢迎大家来到我的博客,请各位看客们点赞、收藏、关注三连!
欢迎大家关注我的知识库,Java之从零开始 · 语雀
你的关注就是我前进的动力!
CSDN专注于问题解决的博客记录,语雀专注于知识的收集与汇总,包括分享前沿技术。
学完HTML+JavaScript,不加点餐???
Liunx 全操作过程 【JDK1.8配置、MySQL、Docker、mariaDB、nginx、tomcat、redis、各种问题解决总结】
首先这两天写的一个简单增删改查,基本上靠百度和自学,完成的这个作业。
里面的功能十分的简陋,对于有需要的朋友一点点帮助吧。
这不是一条通往项目的链接:https://pan.baidu.com/s/1Xk17hyeQbcYcU5it_wFA6w 密码:030a
里面有一些前期练习,如果心急,那就直接看index4.html吧,那是此次的网页实现,js文件放在js文件夹下。
然后,先给大家看看效果,因为没有写css美化,太过于难看,请见谅!
下面我讲解一下,我在这个作业中遇到的问题,相信初学者同样也会和我一样遇到这类问题。
首先你要弄懂innerHTML和innerText的区别,这个很容易就遇到问题。
innerHTML获取到的不只是文本,它得到的是标签对,相当于你获取一行代码吧。
innerText获取到却是纯文本,当然兼容性在这里并不涉及,想要更弄懂这其中缘由,自行百度。
以下是我出错地方:
需求是获取复选框后面文本,想当然用到百度,百度得到的代码也的确有用,而不是value值
第一个错误,实现依靠nextSibling.nodeValue得到文本值,但是得到的值,如果使用innerHTML获取,就会出现错误,下面进行比较判断很容易出错,这时应该用innerText,直接获取纯文本,进行比较。
//获取文本值
var selectedValue="";
for(var i=0;i<interests.length;i++){
if(interests[i].checked){
// nextSibling是获得当前对象的下一个对象
// nodeValue是返回一个节点的值
selectedValue=selectedValue+interests[i].value+" ";
// selectedValue=selectedValue+interests[i].nextSibling.nodeValue;
}
}
第二个错误,当更新/修改值时,使用innerHTML或innerText似乎都会自动换行,这时你就用用到去除空格或者去除换行,防止出现错误,无法判断到值。
而我用到的是正则表达式,使用replace()匹配替换值。
去掉后面空格
str="abc ";
str=str.replace(/(\s*$)/g, "");
console.log(str);
去掉换行
str="abc/n/r";
str=str.replace(/[\r\n]/g,"");
console.log(str);
第三个错误,其实是我对代码不熟造成的,重置功能实现,每次对于点击修改回显数据时,第二次点击修改按钮回显数据,就会造成复选框以及单选框、下拉框不显示的错误,为了避免这个错误,应该每次点击前清空所有数据,然后在回显数据。
如果在后面重置,就会造成文本框内容变了,但是下拉框以及复选框,单选框都没变呐。
第四个错误,其实在修改更新时出现,原本我打算每次点击修改按钮后,将提交按钮隐藏,重新创建一个节点按钮,如果用户不乱点,看起来还一点毛病都没有,谁叫我手贱多点几下修改按钮,这新增的更新按钮如洪水般蔓延演化而出,咦,怎么把它只新增一次呢?扣了扣头,哥达鸭一愣,发现我解决不了,所以只好去百度取经,DOM节点的使用,也就弄明白setAttribute()这个方法原来是修改节点属性的东东,只好另辟蹊径改改提交按钮就ok了,汗颜!!!
第五个错误,也属于低级错误,哎,怎么老犯这么多错呢?对于JS的方法使用出现了致命错误。大一讲的JavaScript知识,似乎过了一年又全换回去了。这不老师又重新讲解一下,但是就前面的几个练习,还不足以然我想起曾经的知识。
这个错误居然是内部函数调用出错,一开始我使用的window.onload = function() {
document.getElementById(id).onclick = function() {
代码块
}
}
原本打算使用window.onload = function() {
function 方法名(){}
}
在按钮那边写个οnclick=“方法名()”调用一下就行,结果出现整个方法没有调用,还一直报错,然后就又来到百度,搜啊搜啊,找到解决方案了,就写成了window.onload = function() {
del=function(obj){}
}这样,好像行得通,不管了先用再说。
结果不游细说,又出现一个跟这个相同的错误,什么?前面代码都没错,为什么修改回显就出错?岂有此理!!然后我就老实的百度,到最后还是我的同学,一针见血。原来方法是要写到外面去,才能调用,所以又浪费好长的时间,心痛自己。
第六个错误,其实不算错误,只是把我饶了一大圈,就比如
document.getElementById(id).onclick = function() {
代码块
}
这么写代码,可是呢?我在按钮一边就只写了name值,然后我调用了getElementsByName(name)这来实现点击事件,结果发现报错呢?什么原因我没有去查,不过好像这么写只有id值才能调用点击事件。
getElementsByTagName(标签)这个好像是获取所有选中的标签,好像是个集合,所以可以在后面直接加上【0】、【1】等这类,来简单处理一些问题。
下面就是功能解释:
首先讲解一下,具体实现的功能要求。
获取光标--------增加一条用户信息,同时显示在下方------重置----全选或选中部分删除--------单个删除------修改回显-------修改内容
以上就是个人完成的步骤。
下面直接先贴HTML代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script type="text/javascript" src="js/js.js" ></script>
<body>
<table border="1" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2" align="center">用户注册信息</td>
</tr>
<tr>
<td>用户名</td>
<td>
<input type="text" id="user" style="width:150px" />
</td>
</tr>
<tr>
<td>密码</td>
<td>
<input type="password" id="password" style="width:150px" />
</td>
</tr>
<tr>
<td>籍贯</td>
<td>
<select id="place">
<option value="">请选择</option>
<option value="1">浙江</option>
<option value="2">河南</option>
<option value="3">北京</option>
<option value="4">重庆</option>
</select>
</td>
</tr>
<tr>
<td>兴趣</td>
<td>
<input type="checkbox" name="interest" value="篮球"/>篮球
<input type="checkbox" name="interest" value="足球"/>足球
<input type="checkbox" name="interest" value="书法"/>书法
<input type="checkbox" name="interest" value="音乐"/>音乐
<br>
<input type="checkbox" name="interest" value="绘画"/>绘画
<input type="checkbox" name="interest" value="散打"/>散打
<input type="checkbox" name="interest" value="瑜伽"/>瑜伽
<input type="checkbox" name="interest" value="其他"/>其他
</td>
</tr>
<tr>
<td>政治面貌 </td>
<td>
<input type="radio" name="identity"/>党员
<input type="radio" name="identity"/>团员
<input type="radio" name="identity"/>群众
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" id="submit" value="提交"/>
<input type="button" id="reset" value="重置" />
</td>
</tr>
</table>
<br /><br /><br /><br />
<div class="">
<table border="1" cellspacing="0" cellpadding="0" id="listTable">
<tr>
<td>选中</td>
<td>用户名</td>
<td>密码</td>
<td>籍贯</td>
<td>兴趣</td>
<td>政治面貌</td>
<td>操作</td>
</tr>
<tr>
<td>
<label>全选</label>
<input type="checkbox" name="item" onclick="checkAll(this);"/>
</td>
<td colspan="6" align="center">
<input type="button" value="选中删除" onclick="delRow();"/>
</td>
</tr>
<tr>
<td><input type="checkbox" name="item"/></td>
<td>007</td>
<td>123456</td>
<td>浙江</td>
<td>书法 绘画 瑜伽</td>
<td>团员</td>
<td>
<input type="button" value="删除" onclick="del(this);"/>
<input type="button" name="update" value="修改" onclick="modify(this)"/>
</td>
</tr>
</table>
</div>
</body>
</html>
然后就是下面就是js代码,其中就不在细说,注释也有,自行查阅。
window.onload = function() {
var submits = document.getElementById("submit");
//获取焦点
document.getElementById('user').focus();
document.getElementById('user').select();
//增加
submits.onclick = function() {
//获取用户信息
var user = document.getElementById("user").value;
//获取密码
var password = document.getElementById("password").value;
//获取籍贯
var place = document.getElementById("place");
//获取索引
var index = place.selectedIndex;
//获取选中值
var placeValue = place.options[index].text;
//获取兴趣
var interests = document.getElementsByName("interest");
//获取value值
var selectValue="";
for(var i = 0; i < interests.length; i++) {
var interest = interests[i];
if(interest.checked==true) {
selectValue=selectValue+interest.value+",";
}
}
//获取文本值
var selectedValue="";
for(var i=0;i<interests.length;i++){
if(interests[i].checked){
// nextSibling是获得当前对象的下一个对象
// nodeValue是返回一个节点的值
selectedValue=selectedValue+interests[i].value+" ";
// selectedValue=selectedValue+interests[i].nextSibling.nodeValue;
}
}
selectedValue=selectedValue.replace(/(\s*$)/g, "");//去掉后面空格
var radioValue="";
var identitys=document.getElementsByName("identity");
for(var i=0;i<identitys.length;i++){
if(identitys[i].checked){
radioValue=radioValue+identitys[i].nextSibling.nodeValue;
}
}
//增加
add(user,password,placeValue,selectedValue,radioValue);
}
//重置
document.getElementById('reset').onclick=function(){
resets();
};
function add(user,password,placeValue,selectedValue,radioValue){
//创建一个框架节点
var tr =document.createElement("tr");
var td1 =document.createElement("td");
var td2 =document.createElement("td");
var td3 =document.createElement("td");
var td4 =document.createElement("td");
var td5 =document.createElement("td");
var td6 =document.createElement("td");
var td7 =document.createElement("td");
//赋值
//setAttribute:修改节点属性
var input1=document.createElement("input");
input1.setAttribute('type','checkbox');
input1.setAttribute('name','item');
td1.appendChild(input1);
//获取到的值进行赋值,innerHTML获取到的值会把标签同时获取
td2.innerHTML=user;
td3.innerHTML=password;
td4.innerHTML=placeValue;
td5.innerHTML=selectedValue;
td6.innerHTML=radioValue;
//操作添加
//创建一个input节点
var input2=document.createElement("input");
input2.setAttribute('type','button');
input2.setAttribute('value','删除');
input2.setAttribute('onclick','del(this)');
//追加节点
td7.appendChild(input2);
var input3=document.createElement("input");
input3.setAttribute('type','button');
input3.setAttribute('name','update');
input3.setAttribute('value','修改');
//添加修改事件
input3.setAttribute('onclick','modify(this)');
td7.appendChild(input3);
//将所有td标签对放入tr中
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
tr.appendChild(td4);
tr.appendChild(td5);
tr.appendChild(td6);
tr.appendChild(td7);
var table=document.getElementById('listTable');
table.appendChild(tr);
//重置(方法)
resets();
}
//全选
checkAll=function (obj){
var checked=obj.checked;
var item=document.getElementsByName("item");
for(var i=0;i<item.length;i++){
if(item[i].checked){
item[i].checked=null;
}else{
item[i].checked=checked;
}
item[i].checked=checked;
}
}
//删除单项
del=function(obj){
var parentTr=obj.parentNode.parentNode;
var parentTable = parentTr.parentNode;
parentTable.removeChild(parentTr);
}
//删除选中
delRow=function(){
var items=document.getElementsByName("item");
for(var i=1;i<items.length;i++){
if(items[i].checked){
var parentNode=items[i].parentNode.parentNode;
var tables=parentNode.parentNode;
tables.removeChild(parentNode);
i--;
}
}
}
}
var rowIndex;
//修改回显
function modify (obj){
//重置
resets();
//获取
var user=document.getElementById('user');
var password = document.getElementById("password");
var place = document.getElementById("place");
var index = place.selectedIndex;
var placeValue = place.options[index].text;
//获取tr和td对,以及选中的下标
var tr = obj.parentNode.parentNode;
var td = tr.getElementsByTagName('td');
rowIndex=obj.parentNode.parentNode.rowIndex;
//赋值
user.value=td[1].innerHTML;
password.value=td[2].innerHTML;
placeValue=td[3].innerHTML;
for(var i=0;i<place.options.length;i++){
var value= place.options[i].text;
if(value==placeValue){
place.options[i].selected=true;
}
}
var interValue=td[4].innerHTML;
var str= interValue.split(" ");
var interests = document.getElementsByName("interest");
for(var i=0;i<str.length;i++){
for (let j=0;j<interests.length;j++) {
if(interests[j].value==str[i]){
interests[j].checked=true;
}
}
}
var identitys=document.getElementsByName("identity");
//这里更新到的值会出现换行,造成字符串无法比较
var identValue=td[5].innerText;
identValue=identValue.replace(/[\r\n]/g,"");//去掉换行符
if(identValue=="党员"){
identitys[0].checked=true;
}else if(identValue=="团员"){
identitys[1].checked=true;
}else if(identValue=="群众"){
identitys[2].checked=true;
}
//回显完毕后,修改按钮事件
var addButton=document.getElementById('submit');
try{
if(addButton.getAttribute("value")=="提交"){
addButton.setAttribute('value','更新');
addButton.setAttribute('id','update');
addButton.setAttribute('onclick','update()');
}
}catch(e){
//TODO handle the exception
}
}
//修改
function update(){
//获取
var table=document.getElementById('listTable');
var user=document.getElementById('user');
var password = document.getElementById("password");
var place = document.getElementById("place");
var index = place.selectedIndex;
var placeValue = place.options[index].text;
var interests = document.getElementsByName("interest");
//获取文本值
var selectedValue="";
for(var i=0;i<interests.length;i++){
if(interests[i].checked){
selectedValue=selectedValue+interests[i].value+" ";
}
}
//去掉末尾空格
selectedValue=selectedValue.replace(/(\s*$)/g, "");
var radioValue="";
var identitys=document.getElementsByName("identity");
for(var i=0;i<identitys.length;i++){
if(identitys[i].checked){
radioValue=radioValue+identitys[i].nextSibling.nodeValue;
}
}
//赋值
table.rows[rowIndex].cells[1].innerHTML=user.value;
table.rows[rowIndex].cells[2].innerHTML=password.value;
table.rows[rowIndex].cells[3].innerHTML=placeValue;
table.rows[rowIndex].cells[4].innerHTML=selectedValue;
table.rows[rowIndex].cells[5].innerText=radioValue;
//更新成功后,将按钮改回原来按钮,同时重置
var updateButton=document.getElementById('update');
updateButton.setAttribute('value','提交');
updateButton.setAttribute('type','button');
updateButton.setAttribute('id','submit');
updateButton.setAttribute('onclick','add()');
resets();
}
//重置
function resets(){
var inputs=document.getElementsByTagName("input");
for(var i=0;i<inputs.length;i++){
if(inputs[i].type=='text'){
inputs[i].value="";
}else if(inputs[i].type=='password'){
inputs[i].value="";
}else if(inputs[i].type=='checkbox'){
if(inputs[i].checked){
inputs[i].checked=false;
}
}else if(inputs[i].type=='radio'){
if(inputs[i].checked){
inputs[i].checked=false;
}
}
}
//重置下拉框
var place=document.getElementById('place');
place.selectedIndex=0;
//获取焦点
document.getElementById('user').focus();
}
ok,希望各位有一定收获。