js设置表格下的tr不可编辑

可以使用以下代码将表格下的所有tr元素设置为不可编辑：

var trElements = document.querySelectorAll('table tr');
for(var i=0; i<trElements.length; i++){
  trElements[i].setAttribute('contenteditable', 'false');
}

这段代码会获取表格下的所有tr元素，然后为每个元素设置contenteditable属性为false，使其不可编辑。

相关问题

控制element的表格里的多选不可点击

要让表格中的多选框不可点击，可以通过设置其disabled属性来实现。具体的实现方法如下：

1. 给需要禁用的多选框添加一个类名或者ID，方便后续对其进行操作。

2. 使用JavaScript代码获取到这些多选框的DOM元素。

3. 遍历这些DOM元素，设置其disabled属性为true即可禁用多选框的点击。

下面是一个示例代码：

<table>
  <thead>
    <tr>
      <th>标题1</th>
      <th>标题2</th>
      <th>标题3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="checkbox" class="disabled-checkbox"></td>
      <td>内容1</td>
      <td>内容2</td>
    </tr>
    <tr>
      <td><input type="checkbox" class="disabled-checkbox"></td>
      <td>内容3</td>
      <td>内容4</td>
    </tr>
  </tbody>
</table>

// 获取所有需要禁用的多选框
const checkboxes = document.querySelectorAll('.disabled-checkbox');
// 遍历多选框，设置其disabled属性为true
checkboxes.forEach((checkbox) => {
  checkbox.disabled = true;
});

以上代码会将表格中所有class为`disabled-checkbox`的多选框禁用。如果需要针对特定的多选框进行禁用，只需要在代码中修改选择器即可。

HTML表格 点击按钮增加一行，增加一行的单元不再被选中，就会将其设置为不可编辑状态

可以通过以下步骤实现：

1. 在 HTML 表格中，为“增加行”按钮添加一个点击事件处理程序。
2. 在事件处理程序中，使用 JavaScript 创建一个新行并将其添加到表格中。
3. 获取新行中的所有单元格，并将它们设置为不可编辑状态。

以下是一些示例代码，演示如何实现这一功能：

HTML 代码：

<table id="myTable">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Actions</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td contenteditable="true">John Doe</td>
      <td contenteditable="true">30</td>
      <td><button onclick="addRow()">Add Row</button></td>
    </tr>
  </tbody>
</table>

JavaScript 代码：

function addRow() {
  // 获取表格和表体元素
  const table = document.getElementById("myTable");
  const tbody = table.querySelector("tbody");

  // 创建新行和单元格
  const row = document.createElement("tr");
  const nameCell = document.createElement("td");
  const ageCell = document.createElement("td");
  const actionsCell = document.createElement("td");

  // 将单元格添加到新行
  row.appendChild(nameCell);
  row.appendChild(ageCell);
  row.appendChild(actionsCell);

  // 向表体添加新行
  tbody.appendChild(row);

  // 设置新行单元格的内容和属性
  nameCell.contentEditable = true;
  ageCell.contentEditable = true;
  actionsCell.innerHTML = '<button onclick="addRow()">Add Row</button>';

  // 获取新行中的所有单元格，并将它们设置为不可编辑状态
  const cells = row.querySelectorAll("td");
  cells.forEach(cell => {
    cell.addEventListener("click", () => {
      cell.contentEditable = false;
    });
  });
}

在这个示例代码中，我们首先获取了表格和表体元素，并创建了一个新的行和单元格。然后，我们将单元格添加到新行中，并将新行添加到表体中。接下来，我们设置新行单元格的内容和属性，并为新行中的所有单元格添加了一个点击事件处理程序。在单元格被点击时，我们将其设置为不可编辑状态，以防止用户意外地编辑已经添加的行。