html偶数行显示按钮，奇数行不显示

您可以使用CSS中的:nth-child()选择器来实现这个效果。通过设置奇数行的display属性为none，偶数行的display属性为block或其他适当的值，可以实现您的需求。

以下是一个示例代码：

<style>
  tr:nth-child(odd) button {
    display: none;
  }
  tr:nth-child(even) button {
    display: block;
    /* 或者其他适当的display值 */
  }
</style>

<table>
  <tr>
    <td>行1</td>
    <td><button>按钮1</button></td>
  </tr>
  <tr>
    <td>行2</td>
    <td><button>按钮2</button></td>
  </tr>
  <tr>
    <td>行3</td>
    <td><button>按钮3</button></td>
  </tr>
  <tr>
    <td>行4</td>
    <td><button>按钮4</button></td>
  </tr>
  <!-- 更多行... -->
</table>

在上面的示例中，奇数行的按钮将被隐藏，而偶数行的按钮将显示出来。您可以根据实际需求调整样式和选择器。

相关问题

typescript初期显示偶数行按钮，奇数行不显示按钮

要在TypeScript中实现初期显示偶数行按钮，奇数行不显示按钮，您可以使用DOM操作来实现这个效果。以下是一个示例代码：

// 获取表格元素
const table = document.getElementById("myTable");

// 获取所有行
const rows = table.getElementsByTagName("tr");

// 遍历行
for (let i = 0; i < rows.length; i++) {
  // 如果是奇数行，则隐藏按钮
  if (i % 2 === 0) {
    const button = rows[i].querySelector("button");
    if (button) {
      button.style.display = "block";
    }
  } else {
    const button = rows[i].querySelector("button");
    if (button) {
      button.style.display = "none";
    }
  }
}

在上面的代码中，首先通过`getElementById`方法获取了ID为"myTable"的表格元素。然后使用`getElementsByTagName`方法获取所有行。接下来，使用循环遍历每一行，根据行的索引来判断是奇数行还是偶数行。如果是奇数行，则获取该行中的按钮元素，并将其display属性设置为"none"以隐藏按钮；如果是偶数行，则将按钮的display属性设置为"block"以显示按钮。

请确保在HTML中有一个带有ID为"myTable"的表格元素，并在每一行中添加了一个按钮元素，例如：

<table id="myTable">
  <tr>
    <td>行1</td>
    <td><button>按钮1</button></td>
  </tr>
  <tr>
    <td>行2</td>
    <td><button>按钮2</button></td>
  </tr>
  <tr>
    <td>行3</td>
    <td><button>按钮3</button></td>
  </tr>
  <tr>
    <td>行4</td>
    <td><button>按钮4</button></td>
  </tr>
  <!-- 更多行... -->
</table>

这样，当页面加载完成时，偶数行的按钮将显示出来，奇数行的按钮将被隐藏。您可以根据实际需求修改代码和表格结构。

JavaScript编写一个函数，向表单添加另外 2 个从属单选按钮（偶数/奇数）。 通过单击按钮，您需要删除偶数行或奇数行，具体取决于用户的选择。应用于html

页面中的表格。

好的，让我来回答你的问题。以下是JavaScript代码示例，可以向HTML表单添加两个从属单选按钮，并根据用户的选择删除表格中的偶数或奇数行：

function addRowSelector() {
  // 获取表格
  var table = document.getElementById("myTable");

  // 创建包含单选按钮和标签的新单元格
  var cell = document.createElement("td");
  cell.innerHTML = '<label><input type="radio" name="rowSelector" value="even"> 偶数行</label><br><label><input type="radio" name="rowSelector" value="odd"> 奇数行</label>';

  // 将新单元格添加到表格的每一行
  for (var i = 0; i < table.rows.length; i++) {
    var row = table.rows[i];
    row.insertBefore(cell.cloneNode(true), row.cells[0]);
  }
}

function deleteSelectedRows() {
  // 获取表格
  var table = document.getElementById("myTable");

  // 获取用户选中的单选按钮值
  var selectedValue = '';
  var rowSelector = document.getElementsByName("rowSelector");
  for (var i = 0; i < rowSelector.length; i++) {
    if (rowSelector[i].checked) {
      selectedValue = rowSelector[i].value;
    }
  }

  // 根据用户的选择删除偶数或奇数行
  for (var i = table.rows.length - 1; i >= 0; i--) {
    // 判断是否为偶数行
    if (i % 2 == 0 && selectedValue == "even") {
      table.deleteRow(i);
    }
    // 判断是否为奇数行
    if (i % 2 != 0 && selectedValue == "odd") {
      table.deleteRow(i);
    }
  }
}

// 在窗口加载时调用添加单选按钮的函数
window.onload = function() {
  addRowSelector();
};

在以上的JavaScript代码中，我们定义了两个函数，分别是 addRowSelector() 和 deleteSelectedRows()。addRowSelector() 函数用来向表格中的每一行添加两个从属单选按钮，用户可以通过单选按钮选择删除偶数行或奇数行。deleteSelectedRows() 函数根据用户的选择，删除表格中的偶数行或奇数行。

在把以上 JavaScript 代码加到 HTML 中后，我们还需要在 HTML 中添加一个表格示例，以便 JavaScript 能够操作它。以下是一个简单的表格示例：

<table id="myTable">
  <tr>
    <td>1</td>
    <td>John</td>
    <td>Doe</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Jane</td>
    <td>Doe</td>
  </tr>
  <tr>
    <td>3</td>
    <td>Bob</td>
    <td>Smith</td>
  </tr>
  <tr>
    <td>4</td>
    <td>Alice</td>
    <td>Johnson</td>
  </tr>
</table>

<button onclick="deleteSelectedRows()">删除选定行</button>

在这个示例中，我们定义了一个 id 为 "myTable" 的表格，并在表格下方添加了一个按钮，当用户单击该按钮时，JavaScript 会调用 deleteSelectedRows() 函数来删除用户选择的偶数行或奇数行。