我需要保留contenteditable="true"属性,并且现在是能够修改前7列的宽度,无法修改的是后面的地8列
时间: 2024-04-17 08:26:15 浏览: 20
如果您需要保留`contenteditable="true"`属性,并且只想修改前7列的宽度,可以采用以下方法:
```html
<head>
<style>
table {
border-collapse: separate;
width: 100%;
}
td, th {
border: 1.5px solid black;
padding: 5px;
}
td:nth-child(-n+7) {
width: 10%;
}
</style>
</head>
```
在上述示例中,我使用了`nth-child(-n+7)`选择器来选择前7列,然后为它们设置了相同的宽度为10%。这样,您就可以保留`contenteditable="true"`属性,并且只修改前7列的宽度。
请注意,由于`contenteditable`属性可能会影响到CSS样式设置的列宽,所以后面的列可能无法直接通过CSS来设置宽度。但是,您仍然可以使用JavaScript来动态修改后面列的宽度,或者通过其他方式来实现您的需求。
如果您需要进一步的帮助,请提供更多详细信息,我将尽力协助您解决问题。
相关问题
可是我现在有两个DIV是嵌套关系,并且两个DIV都加了contenteditable=true属性,现在给里面的DIV绑定focus事件无效,如果外面DIV不设置contenteditable=true属性就有效
可能是因为设置了contenteditable=true属性后,浏览器会将事件交给编辑器处理,而不是直接触发绑定的事件。你可以尝试在外层DIV上设置contenteditable=false,或者在内层DIV上取消contenteditable=true,看看是否能解决问题。另外,你也可以考虑使用冒泡事件来处理这个问题,即在外层DIV上绑定focus事件,然后通过事件冒泡机制处理内层DIV的focus事件。
contenteditable="true">oninput="filterTable(1)"我需要保留这些功能属性
如果你想在保留`contenteditable="true"`和`oninput="filterTable(1)"`属性的同时实现表单提交功能,你可以使用JavaScript来处理表单提交。
首先,在`<form>`标签中添加一个`onsubmit`事件处理程序,用于在表单提交时执行自定义的JavaScript函数。例如:
```html
<form action="insert.php" method="POST" onsubmit="submitForm(event)">
<!-- 表单内容 -->
</form>
```
接下来,创建一个JavaScript函数`submitForm(event)`来处理表单的提交事件。在该函数中,你可以获取表单中的数据,并将其通过AJAX请求发送到服务器端的`insert.php`文件进行处理。例如:
```javascript
function submitForm(event) {
event.preventDefault(); // 阻止表单的默认提交行为
var name = document.getElementById("name").innerText;
var email = document.getElementById("email").innerText;
// 创建一个XMLHttpRequest对象
var xhr = new XMLHttpRequest();
// 设置请求方法、URL和异步标识
xhr.open("POST", "insert.php", true);
// 设置请求头
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
// 监听请求完成事件
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 请求成功处理
console.log(xhr.responseText);
}
};
// 构建请求体数据
var data = "name=" + encodeURIComponent(name) + "&email=" + encodeURIComponent(email);
// 发送AJAX请求
xhr.send(data);
}
```
在上述代码中,我们使用`event.preventDefault()`来阻止表单的默认提交行为。然后,我们通过`document.getElementById`方法获取输入字段的值,并将其编码为适当的格式。
接下来,我们创建了一个`XMLHttpRequest`对象,并设置了请求方法、URL和异步标识。我们还设置了请求头,将数据编码为`application/x-www-form-urlencoded`格式。
然后,我们监听`onreadystatechange`事件,该事件在AJAX请求完成时会被触发。如果请求成功,我们可以在该事件中处理相应的逻辑。
最后,我们构建了请求体数据,并使用`xhr.send(data)`发送AJAX请求。
确保将上述JavaScript代码放置在HTML文件的`<script>`标签中,或者放置在外部的JavaScript文件中并通过`<script src="path/to/your/javascript.js"></script>`引入。
通过以上步骤,你可以在保留`contenteditable="true"`和`oninput="filterTable(1)"`属性的同时,实现表单提交并将数据发送到服务器端的`insert.php`文件进行处理。
希望这个解决方案对你有帮助。如有任何疑问,请随时提问。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
<input type="text" oninput="filterTable(1)" placeholder="aoiStep">
<input type="text" oninput="filterTable(2)" placeholder="defectType">
<input type="text" oninput="filterTable(3)" placeholder="layerCode">
<input type="text" oninput="filterTable(4)" placeholder="type">
<input type="text" oninput="filterTable(5)" placeholder="dpet">
<input type="text" oninput="filterTable(6)" placeholder="subcode">
<input type="text" placeholder="codeDescription">
image1
image2
image3
image4
image5
<input type="text" placeholder="determination_rule">
想在保留contenteditable="true"和oninput="filterTable(1)"属性的同时实现表单提交修改功能
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)