<!DOCTYPE html> <html> <head> <style> table { border-collapse: separate; width: 100%; } td, th { border: 1.5px solid black; padding: 5px; } td:nth-child(1) input, td:nth-child(2) input, td:nth-child(3) input, td:nth-child(4) input, td:nth-child(5) input, td:nth-child(6) input, td:nth-child(7) input, td:nth-child(8) input { width: 10%; } </style> </head> <body> <table> <tr> <td contenteditable="true"><input type="text" oninput="filterTable(0)" placeholder="工艺膜层"></td> <td contenteditable="true"><input type="text" oninput="filterTable(1)" placeholder="AOI Step"></td> <td contenteditable="true"><input type="text" oninput="filterTable(2)" placeholder="不良类型"></td> <td contenteditable="true"><input type="text" oninput="filterTable(3)" placeholder="Layer(Code)"></td> <td contenteditable="true"><input type="text" oninput="filterTable(4)" placeholder="Type"></td> <td contenteditable="true"><input type="text" oninput="filterTable(5)" placeholder="Dpet"></td> <td contenteditable="true"><input type="text" oninput="filterTable(6)" placeholder="Subcode"></td> <td contenteditable="true">Code描述</td> <td contenteditable="true">Image1</td> <td contenteditable="true">Image2</td> <td contenteditable="true">Image3</td> <td contenteditable="true">Image4</td> <td contenteditable="true">Image5</td> <td contenteditable="true">Image6</td> <td contenteditable="true">判定细则</td> </tr> </thead> <tbody> <tr> <td contenteditable="true">ACT</td> <td contenteditable="true">Particle</td> <td contenteditable="true">ACT</td> <td contenteditable="true">Particle</td> <td contenteditable="true">ACT</td> <td contenteditable="true">Particle</td> <td contenteditable="true">ACT</td> <td contenteditable="true">Particle</td> <td> <input type="file" onchange="previewImage(this)" onclick="showPopup(this.src)"style="width: 100px; height: auto;" > </td> <td> <input type="file" onchange="previewImage(this)"onclick="showPopup(this.src)" style="width: 100px; height: auto;"> </td> <td> <input type="file" onchange="previewImage(this)" onclick="showPopup(this.src)"style="width: 100px; height: auto;"> </td> <td> <input type="file" onchange="previewImage(this)" onclick="showPopup(this.src)"style="width: 100px; height: auto;"> </td> <td> <input type="file" onchange="previewImage(this)" onclick="showPopup(this.src)"style="width: 100px; height: auto;"> </td> <td> <input type="file" onchange="previewImage(this)"onclick="showPopup(this.src)"style="width: 100px; height: auto;"> </td> <td contenteditable="true">Particle</td> </tr> </tbody> </table> <script> window.addEventListener('DOMContentLoaded', (event) => { const td8 = document.querySelector('td:nth-child(8)'); td8.style.width = '300px'; }); </script> </body> </html>以上代码中无法修改第8列列宽,哪里存在问题
时间: 2023-08-14 17:01:14 浏览: 159
文章配套网页源代码-HTML <!DOCTYPE> 声明
根据你提供的代码,无法修改第8列的列宽的问题是因为在JavaScript代码中,你选择的是第8个`td`元素,而实际上第8列是第9个`td`元素。所以需要将代码中的`querySelector`中的索引改为9,如下所示:
```javascript
window.addEventListener('DOMContentLoaded', (event) => {
const td9 = document.querySelector('td:nth-child(9)');
td9.style.width = '300px';
});
```
这样就能够正确地修改第8列的列宽为300px了。
阅读全文