万老网

jquery锁定某行不能编辑

• 经验
今天我们来介绍一下如何使用 jQuery 锁定某行，使其不能被编辑。首先，我们需要一些 HTML 和 CSS。我们将使用一个 `` 元素来展示我们的数据。我们想要锁定第二行，使其不能被编辑。在 CSS 中，我们将使用伪类 `:not` 来选取除第二行以外的所有行，并将它们的 `contenteditable` 属性设置为 `true`：
<style>#my-table tr:not(:nth-of-type(2)) td {cursor: pointer;}#my-table tr:not(:nth-of-type(2)) td[contenteditable=true] {border-bottom: 2px solid #f00;}</style><table id="my-table"><tr><th>名称</th><th>价格</th></tr><tr><td>电视机</td><td>$699</td></tr><tr contenteditable="true"><td>冰箱</td><td>$799</td></tr><tr><td>手机</td><td>$299</td></tr></table>
在 JavaScript 中，我们将使用 jQuery 来选取第二行，并将其所有 `
` 元素的 `contenteditable` 属性设置为 `false`：
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script><script>$(document).ready(function() {$(#my-table tr:nth-of-type(2) td).attr(contenteditable, false);});</script>
现在，第二行将不能被编辑了。如果你尝试点击第二行的任何单元格，光标会立即跳到其他单元格。同时，第二行的底部将有一个红色的边框，用于提醒用户这一行是锁定的。

jquery锁定某行不能编辑

猜你喜欢

最近发表

© 2023 万老网  粤ICP备15100661号
免责声明：本站文章来自网友投稿、互联网，不代表本站观点，版权归原创者所有，如果侵犯了你的权益，请通知我们，我们会及时删除