Question

我的页面上有一个表格，我想知道当用户点击第二列的标题时是否可以更改第二列的值。

例如，

-----------------------------
| 1st heading | 2nd heading |      
|-------------|-------------|           
|             |             |
|             |             |
|             |             |
|             |             |
|             |             |

现在，当用户点击＆＃34;第二个标题＆＃34;第二列的值将改变，标题的名称也将改变（从第二个标题到第三个标题）

Answer 1

这是一个使用jquery的简单任务。首先将id添加到列中。第二个标题栏应该是这样的

没有jQuery

<th id="th2" onclick="changeVal()">2nd Heading</th>

    <script>
    function changeVal() {
    document.getElementById("th2").innerHTML = "3rd Heading";
    }
    </script>

使用jQuery 本节已更新。我在列标题中添加了一个数据状态属性，因此当您切换值时，它将记录最后一次更改。

 <th id="th2" data-state="2">2nd Heading</th>

在链接jquery文件后添加这样的jquery代码

<script type="javascript" src="path_to_jquery.js" />
 <script>
    $("#th2").click(function() {
    var state = $(this).attr("data-state");

    if(state=="2") {
    $(this).html("3rd Heading");
    $(this).attr("data-state", "3");
    } else if(state=="3") {
    $(this).html("2nd Heading");
    $(this).attr("data-state", "2");
    }
    });

//you can replace $(this) with $("#th2") or thr id of another element or table cell to manipulate the value inside
</script>

尝试并提供反馈

Answer 2

以下是jQuery的一个简单示例。也许它会帮助你

＆＃13;

$(document).ready(function(){
    $("table th:nth-child(2)").click(function(){
         $(this).text("3rd heading");
         $("tr td:nth-child(2)").text("changed");
    });
});

＆＃13;

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
    padding: 5px;
    text-align: center;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <th>1st heading </th> <th>2nd heading</th>
  </tr>
  <tr>
    <td>val1</td><td>val2</td>
  </tr>
  <tr>
    <td>val1</td><td>val2</td>
  </tr>
</table>

＆＃13;

Answer 3

在每个th元素上添加一个事件监听器，并根据需要添加innerHTML更改。

目前，int值仅基于th索引，因此它只会更改一次（index + 1）。
我们需要更多的信息来改变逻辑。

＆＃13;

var ths = document.getElementsByTagName("th");
var tds = document.getElementsByTagName("td");

for (var i = 0; i < ths.length; i++) {
  (function(i) {
    ths[i].addEventListener('click', function(e){
      changeText(i);
    });
  }(i));
}

function changeText(index) {
  ths[index].innerHTML = "TH" + ( index + 1 );
  tds[index].innerHTML = "TD" + ( index + 1 );
}

＆＃13;

<table>
  <thead>
    <th>TH0</th>
    <th>TH1</th>
  </thead>
  <tbody>
    <tr>
      <td>TD0</td>
      <td>TD1</td>
    </tr>
  </tbody>
</table>

＆＃13;

Answer 4

为了争论（我绝不会建议这样做 - javascript是出于某种原因！），这里是一个纯CSS的解决方案 - 虽然它是一个使用{ {1}}和checkbox模拟 CSS点击并更改已隐藏在表格中的内容 - 请参阅下面的演示：

label

table {
  border-collapse: collapse;
}
table td,
table th {
  border: 1px solid #ddd;
  padding: 10px;
}
.hide{
  display: none;
}

#h1:checked ~ table > tbody > tr > td[data-attr='h1'] span.new {
  display: block;
}
#h1:checked ~ table > tbody > tr > td[data-attr='h1'] span.new + span{
  display: none;
}

#h2:checked ~ table > tbody > tr > td[data-attr='h2'] span.new {
  display: block;
}

#h2:checked ~ table > tbody > tr > td[data-attr='h2'] span.new + span {
  display: none;
}

当用户单击表的第2列的标题时，更改第2列的值

4 个答案: