今天我们来介绍一下如何使用 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锁定某行不能编辑