<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
function select(){
let x=$("td input:checked").parent().parent();
let xx=x.children();
console.log("选中:");
console.log(xx);
}
function begin(){
console.log("执行begin函数了");
let tbody=document.getElementById("tbody");
for(let x=0;x<3;x++){//行
let w=document.createElement("tr");
let input=document.createElement("input");
input.setAttribute("type","checkbox");
w.append(input);
for(let q=0;q<2;q++){//列
let ww=document.createElement("td");
ww.innerHTML=" "+x;
w.appendChild(ww);
}
tbody.append(w);
}
}
</script>
</head>
<body onload="begin()">
<table contenteditable="true">
<thead>
<tr id="head">
<th>
<input type="checkbox"/>
</th>
<th>name</th>
<th>author</th>
</tr>
</thead>
<tbody id="tbody" >
<!-- <tr id="tr1">-->
<!-- <td>-->
<!-- <input type="checkbox"/>-->
<!-- </td>-->
<!-- <td>-->
<!-- 2-->
<!-- </td>-->
<!-- <td>-->
<!-- 2-->
<!-- </td>-->
<!-- </tr>-->
<!-- <tr id="tr2">-->
<!-- <td>-->
<!-- <input type="checkbox"/>-->
<!-- </td>-->
<!-- <td>-->
<!-- 1-->
<!-- </td>-->
<!-- <td>-->
<!-- 1-->
<!-- </td>-->
<!-- </tr>-->
<!-- <tr id="tr3">-->
<!-- <td>-->
<!-- <input type="checkbox"/>-->
<!-- </td>-->
<!-- <td>-->
<!-- 3-->
<!-- </td>-->
<!-- <td>-->
<!-- 3-->
<!-- </td>-->
<!-- </tr>-->
</tbody>
</table>
<button onclick="select()">选择出被选中的</button>
</body>
</html>
我想在控制台输出被选中的td,但是发现由js生成表格时,好像读不到任何关于生成的东西。
若不使用begin函数生成把表格内容,而使用html中静态的表格内容时,就可以通过select函数读取到td。
这是为什么?