事情是这样的。再做动态表格行和列的删除时,导师说我做的这种键入的形式不对,这种形式用户体验感多差啊,甲方肯定不会满意的。给我提出改进方案,要么通过模态框和输入框结合起来获得相关数据,要么通过结合单选框(radio),选中要删除的行或列,再点击按钮删除。模态框我现在还没接触,同时为了锻炼前端编程能力就选择了使用单选框来解决。
首先给出基本HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<style>
table{
border:black solid 2px;
border-collapse:collapse;
}
td{
border:black solid 2px;
padding:10px;
}
</style>
<body>
<div>
<input type="button" value="增加行" id="addRowButton">
<input type="button" value="删除选中的行" id="deleteSelectedRow">
<input type="button" value="增加列" id="addColButton">
<input type="button" value="删除选中的列" id="deleteSelectedCol">
</div>
<div>
<table id="table">
<tr>
<td></td>
<td><input type="radio" class="colSelectedRadio" name="colSelected"></td>
<td><input type="radio" class="colSelectedRadio" name="colSelected"></td>
<td><input type="radio" class="colSelectedRadio" name="colSelected"></td>
<td><input type="radio" class="colSelectedRadio" name="colSelected"></td>
</tr>
<tr>
<td><input type="radio" name="rowSelected" class="rowSelectedRadio"></td>
<td>1,1</td>
<td>1,2</td>
<td>1,3</td>
<td>1,4</td>
</tr>
<tr>
<td><input type="radio" name="rowSelected" class="rowSelectedRadio"></td>
<td>2,1</td>
<td>2,2</td>
<td>2,3</td>
<td>2,4</td>
</tr>
<tr>
<td><input type="radio" name="rowSelected" class="rowSelectedRadio"></td>
<td>3,1</td>
<td>3,2</td>
<td>3,3</td>
<td>3,4</td>
</tr>
</table>
</div>
</body>
<script>
var addRow = function () {
let tableJquery = $("#table");
let colCount = tableJquery[0].rows[0].cells.length - 1; //-1原因是前面单选框也占一个位置
let htmlStr = "<tr><td><input type='radio' name='rowSelected' class='rowSelectedRadio'></td>";
for (let i = 0; i < colCount ; i++) {
htmlStr += "<td>新的一行</td>";
}
htmlStr += "</tr>";
tableJquery.append(htmlStr);
}
$("#addRowButton").click(addRow);
</script>
</html>
十分简单,就是我现在学的最基本的前端操作,查看相关规律,写好相关的html语句,用js将html追加(append)到相关控件元素后面,相应的动态效果就实现了。例如上面就很快的完成了新增加一行的操作。
但是,就在写增加一行的时候,出现了问题,且这个问题让我思考了好一会才明白其道理,现在此做出笔记。
var addCol = function() {
//添加一行,首先肯定要先给第一行后追加一个单选框
let tableJquery = $("table tr"); //用jquery得到table标签下所有tr标签
let headTr = tableJquery[0]; //取得第一个tr,分析html很明显就是我们要加东西的位置
//然后构建相关HTML语句,再在headTr下追加相关Html,可是出错了,没有达到预想效果!
let htmlStr = "<td><input type='radio' class='colSelectedRadio' name='colSelected'></td>"
headTr.append(htmlStr);
}
$("#addColButton").click(addCol);
这使得我百思不得其解,追加HTML代码不就是这样吗?找到对应位置,往后append就可以。于是我进行了以下测试。
/*
<table id="table">
<tr id="test">
<td></td>
<td><input type="radio" class="colSelectedRadio" name="colSelected"></td>
为上面html要插入新元素的位置加上id
*/
var addCol = function() {
let tableJquery = $("table tr"); //用jquery得到table标签下所有tr标签
let headTr = tableJquery[0]; //取得第一个tr,分析html很明显就是我们要加东西的位置
console.log("headTr", headTr);
headTr.append("<h1>asdassa</h1>");
console.log(headTr.append);
console.log("$(\"#test\")", $("#test"));
$("#test").append("<td>adsasdas</td>")
console.log($("#test").append);
}
输出结果
得到的对象都不一样。headTr
已经直接具体为某个控件元素了,而由JQuery语法的得到的JQuery.fn.init xxx
对象,我们后面姑且称为(JQuery元素对象),它是一个对象,依次展开后有很多键值对。
再深入点看效果
headTr
是直接给控件加了字符串,标签没起作用。而我们直接用JQuery获得的JQuery元素对象可以正确的识别标签,并且按照标签加入相关数据。
再深入点看源码(ctrl+左键)
一个是jszip.js的方法,一个是jquery-1.10.2.js的方法。怪不得不能达到预期效果,方法都没调用对。
看了下他俩定位的append方法都不一样,这里不知道怎么定位选择哪个方法,有大佬可以指出,js中方法变量名重复了,会调用的哪个,或者说如何选择去调用哪个方法?
说回这个题,这个题走jquery的append是不行了,因为我不想给一个html文档很多元素加id,始终记得id是必须保证不重复的,如果你现在用了以后再想给其他元素用怎么办,重名怎么办?虽说强大的编译器(IDEA)会给你提醒。但我建议还是尽量少用id属性,可以使用从一个元素推出你想要的元素的位置以及和它的关系,这样锻炼了dom树形结构的思想。
var addCol = function() {
let tableJquery = $("table tr"); //用jquery得到table标签下所有tr标签
let headTr = tableJquery[0]; //取得第一个tr,分析html很明显就是我们要加东西的位置
let newRadioButton = document.createElement("td");
newRadioButton.innerHTML = "<td><input type='radio' class='colSelectedRadio' " +
"name='colSelected'></td>";
headTr.appendChild(newRadioButton);//为了区分和jquery的append,记住原生dom操作就用appendChild
let rowCount = tableJquery.length - 1;
for (let i = 0; i <rowCount ; i++) {
let newTd = document.createElement("td");
newTd.innerText = "新的一列";
tableJquery[i + 1].appendChild(newTd);
}
}
这个题用原生dom操作解决,完整代码看点击这里。
结论
根据上面描述的用jquery给没有id等其他属性的控件元素添加html代码的例子,我从中明白了。
- JQuery语法$(“选择器”)会得到一个jquery元素对象(我这样称呼),该对象里面有十分多的键值对。
- JQuery将新构建好的HTML代码直接append,为了进行区分,原生DOM操作是用document.createElement创建相关元素,然后填写属性,通过appendChild进行添加!
- JQuery实际上就是封装了DOM操作。JQuery操作简单易记,一个JQuery语句可能需要多条DOM操作才能完成!但是,记住JQuery只是原生DOM的一个封装,所以JQuery能做的原生DOM一定也可以做,只不过麻烦点,而原生DOM是可以操作你的页面上任何的东西,而JQuery不一定。
- 由JQuery得到的jquery元素对象可以使用JQuery里面的所有合法语句,而一旦你使用jquery元素对象取得具体某个下标,或者重新移动定位另一个控件元素,这时候这个控件元素就不是jquery元素对象了,就不能使用jquery相关操作。
- 一句话概括就是:一旦用jquery元素去定位其他一个元素,那个元素就失去了jquery一些东西(例如:append),就要考虑用原生的Dom操作了!
依然存在的问题
另外还有两个我还是不是很理解的问题。第一个就是在js中,如果出现导入两个js文件,他俩存在相同的函数名称且函数参数完全一致,然后再在另一个js中调用这个函数名称,它怎么区分是该调用哪一个函数呢?第二个就是JQuery与原生DOM的问题,上述我说用jquery元素去定位另外一个元素,这个元素就成原生元素了,我不知道如何从原生元素变为jquery元素,有大佬帮帮忙解答下吗?