在javascript中获取多个基于td id的值时显示错误
这是我的表，具有不同的值。当通过 javascript 访问基于 td id 的值时，它仅返回单个值。
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<table>
<tr>
<td class="srno"> 1. </td>
<td class="check"><input type="checkbox" name="checkbox" value="9"></td>
<td class="cname">11534420 </td>
<td class="comName" id="9 ">student1 </td>
<td scope="col" id="contactno" style="display:none;">123456789</td>
<td scope="col" id="stuname" style="display:none;">student1</td>
<td class="attendance"><select name="selattend">
<option value="present">Present</option>
<option value="absent">Absent</option>
</select></td>
</tr>
<tr>
<td class="srno"> 2. </td>
<td class="check"><input type="checkbox" name="checkbox" value="10"></td>
<td class="cname">14395673 </td>
<td class="comName" id="10 ">student2 </td>
<td scope="col" id="contactno" style="display:none;">123456780</td>
<td scope="col" id="stuname" style="display:none;">student2</td>
<td class="attendance"><select name="selattend">
<option value="present">Present</option>
<option value="absent">Absent</option>
</select></td>
</tr>
<tr>
<td class="srno"> 3. </td>
<td class="check"><input type="checkbox" name="checkbox" value="11"></td>
<td class="cname">17256926 </td>
<td class="comName" id="11 ">student3 </td>
<td scope="col" id="contactno" style="display:none;">123456712</td>
<td scope="col" id="stuname" style="display:none;">student3</td>
<td class="attendance"><select name="selattend">
<option value="present">Present</option>
<option value="absent">Absent</option>
</select></td>
</tr>
</table>
</body>
</html>
这是我的外部 javascript 代码是
function getvalue()
{
var contactno=document.getElementById("contactno").innerText;
alert(contactno);
var stuname=document.getElementById("stuname").innerText;
alert(stuname);
}
它仅返回第一个 td id 值。如何在javascript中获取所有基于id的td值的数组
慕妹31465931回答
-
波斯汪
getElementById() 方法将始终仅返回第一个找到的 DOM 元素，而不是列表！对于结果中需要多个元素的此类查询，请使用 querySelectorAll() 方法。例子：var elements = document.querySelectorAll('#contactno');for(i=0; i<elements.length; i++) { console.log(elements[i].innerText)}<!DOCTYPE html><html><head><meta charset="ISO-8859-1"><title>Insert title here</title></head><body> <table> <tr> <td class="srno"> 1. </td> <td class="check"><input type="checkbox" name="checkbox" value="9"></td> <td class="cname">11534420 </td> <td class="comName" id="9 ">student1 </td> <td scope="col" id="contactno" style="display:none;">123456789</td> <td scope="col" id="stuname" style="display:none;">student1</td> <td class="attendance"><select name="selattend"> <option value="present">Present</option> <option value="absent">Absent</option> </select></td> </tr> <tr> <td class="srno"> 2. </td> <td class="check"><input type="checkbox" name="checkbox" value="10"></td> <td class="cname">14395673 </td> <td class="comName" id="10 ">student2 </td> <td scope="col" id="contactno" style="display:none;">123456780</td> <td scope="col" id="stuname" style="display:none;">student2</td> <td class="attendance"><select name="selattend"> <option value="present">Present</option> <option value="absent">Absent</option> </select></td> </tr> <tr> <td class="srno"> 3. </td> <td class="check"><input type="checkbox" name="checkbox" value="11"></td> <td class="cname">17256926 </td> <td class="comName" id="11 ">student3 </td> <td scope="col" id="contactno" style="display:none;">123456712</td> <td scope="col" id="stuname" style="display:none;">student3</td> <td class="attendance"><select name="selattend"> <option value="present">Present</option> <option value="absent">Absent</option> </select></td> </tr> </table> </body></html>
随时随地看视频慕课网APP
相关分类
Html5