ไม่สามารถกำหนด innerhtml ของ tbody ใน IE6-IE9 ได้รหัสที่ทำซ้ำมีดังนี้
การคัดลอกรหัสมีดังนี้:
<! doctype html>
<html>
<head>
<meta charset = "utf-8"/>
<title> ie6-ie9 innerhtml ไม่สามารถคัดลอกบั๊ก </title>
</head>
<body style = "ความสูง: 3000px">
<table>
<tbody>
<tr> <td> aaa </td> </tr>
</tbody>
</table>
<p>
<button id = "btn1"> รับ </button> <button id = "btn2"> ตั้งค่า </putions>
</p>
<script>
var tbody = document.getElementsByTagname ('tbody') [0]
ฟังก์ชั่น settbody () {
tbody.innerhtml = '<tr> <td> bbb </td> </tr>'
-
ฟังก์ชั่น gettbody () {
การแจ้งเตือน (tbody.innerhtml)
-
btn1.onclick = function () {
Gettbody ()
-
btn2.onclick = function () {
Settbody ()
-
</script>
</body>
</html>
สองปุ่มปุ่มแรกได้รับ innerhtml ของ tbody และปุ่มที่สองตั้งค่า innerhtml ของ tbody
เมื่อได้รับมันเบราว์เซอร์ทั้งหมดจะปรากฏขึ้นเป็นสตริงของ TR แต่เมื่อตั้งค่า IE6-9 ไม่รองรับและมีการรายงานข้อผิดพลาดดังแสดงในรูปที่แสดงในรูปที่
คุณสามารถใช้คุณสมบัติเพื่อตรวจสอบว่าเบราว์เซอร์รองรับการตั้งค่า innerhtml ของ tbody
การคัดลอกรหัสมีดังนี้:
var isupporttbodyinnerhtml = function () {
var table = document.createElement ('ตาราง')
var tbody = document.createElement ('tbody')
table.appendchild (tbody)
var boo = true
พยายาม{
tbody.innerhtml = '<tr> </tr>'
} catch (e) {
boo = false
-
กลับ Boo
-
การแจ้งเตือน (isupporttbodyinnerhtml)
สำหรับ IE6-IE9 หากคุณต้องการตั้งค่า innerhtml ของ tbody คุณสามารถใช้วิธีทางเลือกต่อไปนี้
การคัดลอกรหัสมีดังนี้:
ฟังก์ชั่น settbodyinnerhtml (tbody, html) {
var div = document.createElement ('div')
div.innerhtml = '<table>' + html + '</table>'
ในขณะที่ (tbody.firstchild) {
tbody.removechild (tbody.firstchild)
-
tbody.appendchild (div.firstchild.firstchild)
-
ใช้ div เพื่อบรรจุตารางจากนั้นลบองค์ประกอบทั้งหมดใน tbody และในที่สุดก็เพิ่มองค์ประกอบแรกขององค์ประกอบแรกของ div ลงใน tbody นั่นคือ div> table> tr
แน่นอนว่ามีเวอร์ชันที่มีความคล่องตัวมากขึ้นซึ่งใช้วิธีการแทนที่โดยตรงเพื่อแทนที่
การคัดลอกรหัสมีดังนี้:
ฟังก์ชั่น settbodyinnerhtml (tbody, html) {
var div = document.createElement ('div')
div.innerhtml = '<table>' + html + '</table>'
tbody.parentnode.replacechild (div.firstchild.firstchild, tbody)
-
จากบันทึก MSDN, innerhtml ของ col, colgroup, frameset, html, head, style, table, tfoot, thead, tite, title และ tr ล้วนอ่านอย่างเดียว (IE6-IE9)
คุณสมบัติ InnerHTML นั้นอ่านได้อย่างเดียวบน Col, Colgroup, Frameset, HTML, Head, Style, Table, Tbody, Tfoot, Thead, Title, Title และ TR
คุณสามารถเปลี่ยนค่าขององค์ประกอบชื่อโดยใช้คุณสมบัติ Document.title
ในการเปลี่ยนเนื้อหาของตาราง tfoot, thead และ tr องค์ประกอบให้ใช้โมเดลวัตถุตารางที่อธิบายไว้ในตารางการสร้างแบบไดนามิก อย่างไรก็ตามในการเปลี่ยนเนื้อหาของเซลล์ใดเซลล์หนึ่งคุณสามารถใช้ InnerHTML