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

Question

我有一个表格，我需要单击选项1或选项2等。单击它们时，必须用显示的JSON值填充具有选项n的单元格，然后再次单击相同的选项n，则必须将其隐藏

我曾经尝试过

 function showHideMore(checkBoxValue) { if(checkBoxValue == 'A1') return {'name': 'Clark', age:'39', address:'Washington DC'} if(checkBoxValue == 'B1') return {'name': 'Bob', age:'26', address:'Texas'} if(checkBoxValue == 'C1') return {'name': 'Angelina', age:'31', address:'Ohio'} } 

 <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 target="_blank" href="www.uitshj.org?show=A1" onclick="showHideMore()">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 target="_blank" href="www.uitshj.org?show=B1" onclick="showHideMore()">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 target="_blank" href="www.uitshj.org?show=C" onclick="showHideMore()">Option 3</a></td> <td class="fourth">2018-08-26T01:05:00.171Z</td> </tr> </table> 

Answer 1

给每个选项一个类和一个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)
    }
  })
})

这是一个完整的工作示例：

<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>