Javascript 使用js/jquery展开和折叠表单元格值

我有一个表，我需要在其中单击选项1或选项2等。当单击它们时，具有选项n的单元格必须填充JSON值，如图所示，当再次单击相同的选项n时，它们必须隐藏

我试过了

函数showHideMore（checkBoxValue）
{
if（checkBoxValue='A1'）返回{'name'：'Clark'，年龄：'39'，地址：'Washington D.C.}
if（checkBoxValue='B1'）返回{'name'：'Bob'，年龄：'26'，地址：'Texas'}
if（checkBoxValue='C1'）返回{'name'：'Angelina'，年龄：'31'，地址：'ohoi'}
}

编辑
时间戳
2018-08-26T10:38:01.602Z
2018-08-26T10:23:42.119Z
2018-08-26T01:05:00.171Z

为每个选项指定一个类和一个id：

<td class="third"><a href="#" class='option' id='option_2'>Option 2</a></td>

然后用JQuery连接到它，类似这样的东西应该可以工作：

var myJson = {
  option_1: {'name': 'Clark', age:'39', address:'Washington D.C.'},
  option_2: {'name': 'Bob', age:'26', address:'Texas'},
  option_3: {'name': 'Angelina', age:'31', address:'Ohio'}
}

$(document).ready(function(){
  $('.option').click(function(e){
    e.preventDefault();
    id = $(this).attr('id');
    values = myJson[id];

    parent = $(this).parent('td')
    existing_content = parent.find('.option_content')
    if( existing_content.length ){ //if content exists, remove it
      existing_content.remove()
    } else { //else add the content
      content = "<div class='option_content'>" + values.name + "<br>" + values.age + "<br>" + values.address + "</div>";
      $(this).after(content)
    }
  })
})

var myJson={
选项1:{'name'：'Clark'，年龄：'39'，地址：'Washington D.C.}，
选项2:{'name'：'Bob'，年龄：'26'，地址：'Texas'}，
选项3:{'name'：'Angelina'，年龄：'31'，地址：'ohoi'}
}
$（文档）.ready（函数（）{
$（'.option'）。单击（函数（e）{
e、 预防默认值（）；
id=$（this.attr（'id'）；
value=myJson[id]；
父项=$（this.parent（'td'））
现有内容=parent.find（'.option内容'）
if（existing_content.length）{//如果内容存在，请将其删除
现有内容。删除（）
}else{//else添加内容
content=”“+values.name+”
“+values.age+”
“+values.address+”；
$（此）.after（内容）
}
})
})

下面是一个完整的工作示例：

<script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script>

<table id="tbl" class="dupes" align="center" width="100%" border="1">
    <thead>
        <tr>
            <th class="first"><input type="checkbox" id="select-all"></th>
            <th class="second">Edit</th>
            <th class="third">&nbsp;</th>
            <th class="fourth">Timestamp</th>
        </tr>
    </thead>
    <tr>
        <td class="first"><input class="selects" type="checkbox" value="A1" id="r0"></td>
        <td class="second"><a target="_blank" href="www.uitshj.org?show=A1">1</a></td>
        <td class="third"><a href="#" class='option' id='option_1' >Option 1</a></td>
        <td class="fourth">2018-08-26T10:38:01.602Z</td>
    </tr>
    <tr>
        <td class="first"><input class="selects" type="checkbox" value="B1" id="r1"></td>
        <td class="second"><a target="_blank" href="www.uitshj.org?show=B1">2</a></td>
        <td class="third"><a href="#" class='option' id='option_2' >Option 2</a></td>
        <td class="fourth">2018-08-26T10:23:42.119Z</td>
    </tr>
    <tr>
        <td class="first"><input class="selects" type="checkbox" value="C1" id="r2"></td>
        <td class="second"><a target="_blank" href="www.uitshj.org?show=C1">3</a></td>
        <td class="third"><a href="#" class='option' id='option_3'>Option 3</a></td>
        <td class="fourth">2018-08-26T01:05:00.171Z</td>
    </tr>
</table>

<script>

var myJson = {
  option_1: {'name': 'Clark', age:'39', address:'Washington D.C.'},
  option_2: {'name': 'Bob', age:'26', address:'Texas'},
  option_3: {'name': 'Angelina', age:'31', address:'Ohio'}
}

$(document).ready(function(){
  $('.option').click(function(e){
    e.preventDefault();
    id = $(this).attr('id');
    values = myJson[id];

    parent = $(this).parent('td')
    existing_content = parent.find('.option_content')
    if( existing_content.length ){ //if content exists, remove it
      existing_content.remove()
    } else { //else add the content
      content = "<div class='option_content'>" + values.name + "<br>" + values.age + "<br>" + values.address + "</div>";
      $(this).after(content)
    }
  })
})
</script>

编辑
时间戳
2018-08-26T10:38:01.602Z
2018-08-26T10:23:42.119Z
2018-08-26T01:05:00.171Z
var myJson={
选项1:{'name'：'Clark'，年龄：'39'，地址：'Washington D.C.}，
选项2:{'name'：'Bob'，年龄：'26'，地址：'Texas'}，
选项3:{'name'：'Angelina'，年龄：'31'，地址：'ohoi'}
}
$（文档）.ready（函数（）{
$（'.option'）。单击（函数（e）{
e、 预防默认值（）；
id=$（this.attr（'id'）；
value=myJson[id]；
父项=$（this.parent（'td'））
现有内容=parent.find（'.option内容'）
if（existing_content.length）{//如果内容存在，请将其删除
现有内容。删除（）
}else{//else添加内容
content=”“+values.name+”
“+values.age+”
“+values.address+”；
$（此）.after（内容）
}
})
})

onclick=“showHideMore（）”

不会传递处理程序

函数showHideMore（checkBoxValue）

期望的参数。这会导致处理程序中的

checkBoxValue

始终处于

未定义状态。使用内联事件处理程序无法解决此问题。