表格中动态添加一行,并实现了异步加载元素的绑定的方法
//HTML代码
<!-- jQuery 引包 -->
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<table id="myTable">
<tr class="tableHeard">
<td>项目名称</td>
<td>奖励等级</td>
<td>分数</td>
<td>操作</td>
</tr>
<tr>
<td> <input type="text" placeholder="请输入项目名称"> </td>
<td>
<select name="" class="thought">
<option value="" style="display: none;">请选择项目级别</option>
<option value="1">国家级</option>
<option value="2">省级</option>
<option value="3">校级</option>
</select>
</td>
<td>0</td>
<td> <button onclick="displayResult()">添加</button> <button>删除</button> </td>
</tr>
</table>
//js代码
$(function() { //jQuery在异步加载的元素上绑定change事件
$(document).on("change", ".thought", function() {
var options = $(this).val(); //当前选中项的value值
//判断value值 并给后面那个显示分数的单元格赋赋固定值
if (options == 1) {
// alert("aa");
console.log($(this).parent().next("td"));
$(this).parent().next("td").text("3");
} else if (options == 2) {
$(this).parent().next("td").text("2");
} else {
$(this).parent().next("td").text("0.5");
}
});
});
//此处变量i 使新增行在第二行的位置 一直往下加 避免加到第三行的时候又重复一直往第二行的位置新增行
var i = 2;
function displayResult() {
var table = document.getElementById("myTable");
var row = table.insertRow(i); //insertRow括号中数字表示第几行,设置为几,就从该位置开始添加新行
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
cell1.innerHTML = "<input type='text' placeholder='请输入项目名称'>";
// cell2.html();
//注意下面右侧引号中的代码不要换行 下同
//右侧代码拼接时 若遇到双引号里面还有引号 那么里面那个引号一定要为单引号 否则出问题
cell2.innerHTML = "<select name='' class='thought'><option value ='' style = 'display: none;' > 请选择项目级别 </option><option value = '1' > 国家级 </option><option value = '2' > 省级</option><option value = '3' > 校级 </option></select>";
cell3.innerHTML = "1";
cell3.setAttribute("class", "thoughtScore");
cell4.innerHTML = "<button οnclick='displayResult()'>添加</button> <button>删除</button>";
i++;
}
补充:异步加载元素的绑定的方法
jquery官网关于事件绑定和事件委托的4个方法,有这样的介绍:
- live():jQuery1.7之后弃用
- bind(): 动态添加的元素无法使用该方法绑定事件
- delegate():jQuery1.7之后被on()取代
- on(): jQuery1.7之后引入,支持事件绑定的全部功能
由此可知,正常情况下使用的就是bind()或者on()了,而bind()无法实现在动态添加的元素上绑定事件,那么它在本实例中不能应用,我们平时使用频率很高的$('xx').click(function(){...})
也是不适用的。
所以要实现在异步加载的元素上添加事件绑定需要使用on()方法。
一般来说可以直接绑定在document对象上,如这样的语法:$(document).on('click','xx',function(){...})
$(…)中的元素需要是真正绑定的元素’xx’的父级或者body上,此处是直接把事件委托在document对象上来实现事件绑定,但有时可能会没有效果,可以试着换一个更近一点的父元素。
当事件直接发生在绑定的元素上时,该程序不会被调用。