aタグのリンク文字をクリックのたびに変更するには？

やりたいこと
クリックしたAタグの文字をクリックイベントで切り替えたい

以下のtableにはaタグが３箇所あります。
aタグをクリックしてOranges,Apples,Pinesの下部でそれぞれの詳細行を開く、閉じる
ということをやりたいです。さらに、詳細行を開いているときは
<a href="#">+ Close detail</a>
もう一度クリックして詳細行を閉じたときは
<a href="#">+ Open</a>
に戻したいです。

クリックしたとき、aタグのリンクの文字のみを変更するにはどうしたらよいでしょうか？

html
1<table id="products">
2  <thead>
3    <tr>
4      <th>Product</th>
5      <th>Price</th>
6      <th>Detail</th>
7      <th>date</th>
8    </tr>
9  </thead>
10  <tbody>
11    <tr class="parent">
12      <td>Oranges</td>
13      <td>190</td>
14      <td><a href="#">+ Open</a></td>
15      <td>22/08</td>
16    </tr>
17    <tr>
18      <td></td>
19      <td>100</td>
20      <td>A City </td>
21      <td>22/08/01</td>
22    </tr>
23    <tr>
24      <td></td>
25      <td>140</td>
26      <td>B City </td>
27      <td>22/08/02</td>
28    </tr>
29
30    <tr class="parent">
31      <td>Apples</td>
32      <td>100</td>
33      <td><a href="#">+ Open</a></td>
34      <td>22/10</td>
35    </tr>
36    <tr>
37      <td></td>
38      <td>200</td>
39      <td>C City 1</td>
40      <td>22/09/1</td>
41    </tr>
42    <tr>
43      <td></td>
44      <td>230</td>
45      <td>D City </td>
46      <td>22/09/01</td>
47    </tr>
48    <tr>
49      <td></td>
50      <td>300</td>
51      <td>E City</td>
52      <td>22/09/03</td>
53    </tr>
54    <tr class="parent">
55      <td>Pines</td>
56      <td>700</td>
57      <td><a href="#">+ Open</a></td>
58      <td>22/10</td>
59    </tr>
60    <tr>
61      <td></td>
62      <td>400</td>
63      <td>F City 1</td>
64      <td>22/10/1</td>
65    </tr>
66    <tr>
67      <td></td>
68      <td>440</td>
69      <td>G City 2</td>
70      <td>22/10/2</td>
71    </tr>
72  </tbody>
73</table>
74<style>
75  tbody tr {
76    display : none;
77}
78tr.parent {
79    display : table-row;
80}
81tr.open {
82    display : table-row;
83}
84  </style>
85<script>
86document.getElementById("products").addEventListener("click", function(e) {
87    if (e.target.tagName === "A") {
88        e.preventDefault();
89        var row = e.target.parentNode.parentNode;
90        while ((row = nextTr(row)) && !/\bparent\b/.test(row.className))
91            toggle_it(row);
92    }
93});
94
95function nextTr(row) {
96    while ((row = row.nextSibling) && row.nodeType != 1);
97    return row;
98}
99
100function toggle_it(item){ 
101     if (/\bopen\b/.test(item.className))
102         item.className = item.className.replace(/\bopen\b/," ");
103     else
104         item.className += " open";
105 } 
106
107</script>

行動規範の内容に同意します

回答1件

こんにちは。

疑似要素を使ってみてはいかがですか？

サンプル

html
1      <td><a href="#"><!-- + Open を削除--></a></td>

css
1.parent a:after{
2  content: "+ Open";
3}
4.open a:after{
5  content: "+ Close detail";
6}

js
1
2document.getElementById("products").addEventListener("click", function(e) {
3    if (e.target.tagName === "A") {
4        e.preventDefault();
5        var row = e.target.parentNode.parentNode;
6        toggle_it(row); // 追加
7        while ((row = nextTr(row)) && !/\bparent\b/.test(row.className))
8            toggle_it(row);
9    }
10});