单击“选择我”时如何选择表格的一列？答案

【问题标题】：How to select a column of table when I click on "choose me"?单击“选择我”时如何选择表格的一列？
【发布时间】：2021-09-05 17:58:12
【问题描述】：

这是我项目中的一个表格示例。点击“选择我”时如何选择整个表格列？

<table>
  <tr>
    <th>plan 1</th>
    <th>plan 2</th>
    <th>plan 3</th>
  </tr>
  <tr>
    <td>plan 1 detail</td>
    <td>plan 2 detail</td>
    <td>plan 3 detail</td>
  </tr>
  <tr>
    <td>plan 1 detail</td>
    <td>plan 2 detail</td>
    <td>plan 3 detail</td>
  </tr>
  <tr>
    <td>choose me!</td>
    <td>choose me!</td>
    <td>choose me!</td>
  </tr>
</table>

如果我点击“选择我”，我想改变栏目设计的风格。

请帮忙。

【问题讨论】：

您的具体要求是什么？你想改变列或单元格的样式吗？
我想改变计划的列样式点击选择我！
在 pan 1 的列上单击选择然后它应该改变颜色

标签： javascript php html jquery dom

【解决方案1】：

如果您打算创建静态表而不是在任何循环上，您需要为每个表提供一个静态 ID，以便访问事物并执行您想要的操作。您可以在 w3school 中运行以下示例以进行测试。

<!DOCTYPE html>
<html>
<body>

<table>
  <tr>
    <th>Plan Name</th>
    <th>Plan Details</th>
    <th>Action</th>
  </tr>
  <tr id='row1'>
    <td>Basic</td>
    <td>plan 1 detail</td>
    <td><button onclick="setTable('row1')">choose me!</button></td>
  </tr>
  <tr id='row2'>
    <td>Intermediate</td>
    <td>plan 2 detail</td>
    <td><button onclick="setTable('row2')">choose me!</button></td>
  </tr>
  <tr id='row3'>
    <td>Advance</td>
    <td>plan 3 detail</td>
    <td><button onclick="setTable('row3')">choose me!</button></td>
  </tr>

</table>

<script>

function setTable(id) {
var row = document.getElementById(id);
console.log(row);
row.style.backgroundColor = 'green';
}


</script>

</body>
</html>

注意：要使两行不具有相同的背景颜色，您必须从函数中的所有其他行中删除样式或类。请让我知道这是否有效。如果让你明白了就给个赞吧。

【讨论】：

他们想要为列着色，而不是行。
我想选择计划列而不是行假设我点击选择我所有获取样式更新的列
您只需像以前一样执行此操作并使用选择我单击的功能，它将转换为列。没有问题。对于表格，更好的方法是使用行而不是列，所以我只是改变了一些东西来给人一种感觉。
当我点击其他列时如何从其他列中删除样式
您可以简单地将样式设置为 null 用于带有 id 的休息表行。

【解决方案2】：

试试这个

<script language="javascript">
        function changeColor(cellIndex){
            var objTable = document.getElementById("myTable");
            
            var objRows = objTable.getElementsByTagName("tr");
            
            for(var counter=1; counter<=objRows.length-1;counter++){
            
                var objCells = objRows[counter].getElementsByTagName("td");
                
                for(var cellCounter=0; cellCounter<=objCells.length-1;cellCounter++){                       
                    if(cellCounter===cellIndex){
                        objCells[cellCounter].style.backgroundColor='red';
                    }else{
                        objCells[cellCounter].style=null;
                    }                       
                }   
            }
        }
    </script>

<table id="myTable">
          <tr>
            <th>plan 1</th>
            <th>plan 2</th>
            <th>plan 3</th>
          </tr>
          <tr>
            <td>plan 1 detail</td>
            <td>plan 2 detail</td>
            <td>plan 3 detail</td>
          </tr>
          <tr>
            <td>plan 1 detail</td>
            <td>plan 2 detail</td>
            <td>plan 3 detail</td>
          </tr>
          <tr>
            <td onclick="changeColor(0)">choose me!</td>
            <td onclick="changeColor(1)">choose me!</td>
            <td onclick="changeColor(2)">choose me!</td>
          </tr>

</table>

【讨论】：

完美工作如何在选择其他时删除其他 cloumn 样式
gr8。请接受此解决方案，以便对其他人有所帮助。我将对此进行修改以删除其他列样式。
java脚本方法已修改。请检查并让我知道是否有任何问题或无法按要求工作。