如何使用按行到列选择的表格复选框写入 json 格式？

Question

I am a beginner at studying frontend. I encounter some questions that I want to write JSON format with the table checkbox I selected by row to column. It's mean here is the db column name and its column's value. Then, I want to output like (If only Column_name's td 0,2 were checked):

{
  "Column_name":["0","2"],
  "Column_name_2":[]
}

<table id="tab">
      <tr id ='tr1'>
        <td>Column_name</td>
        <td><input type="checkbox" value="0" />0</td>
        <td><input type="checkbox" value="1" />1</td>
        <td><input type="checkbox" value="2" />2</td>
      </tr>
      <tr id ='tr2'>
        <td>Column_name_2</td>
        <td><input type="checkbox" value="3" />3</td>
        <td><input type="checkbox" value="4" />4</td>
        <td><input type="checkbox" value="5" />5</td>
      </tr>
</table>
<br />
<button class="btn-disp">Display Selected IDs</button>

I have some search to get each element but it seems not to meet.

document.querySelector('.btn-disp').addEventListener('click', e => {

    const ids = [...document.getElementById('tr1')
        .querySelectorAll('td input[type="checkbox"]:checked')]
          .map(cb => cb.value); 
      console.log(`TD1: ${ids.join(', ')}`);
      
      const id2 = [...document.getElementById('tr2')
        .querySelectorAll('td input[type="checkbox"]:checked')]
          .map(cb => cb.value); 
          
      console.log(`TD2: ${id2.join(', ')}`);
});

Answer 1

try the below snippet.

 $('.btn-disp').click(function(){ var Column_name = {}; var Column_name_tmp = []; var Column_name_tmp = $("input[name='Column_name']:checked").map(function(){ return $(this).val(); }).get(); Column_name['Column_name'] = Column_name_tmp; var Column_name_2 = {}; var Column_name_2tmp = []; var Column_name_2tmp = $("input[name='Column_name_2']:checked").map(function(){ return $(this).val(); }).get(); Column_name_2['Column_name_2'] = Column_name_2tmp; console.log(Column_name); console.log(Column_name_2); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table id="tab"> <tr id ='tr1'> <td>Column_name</td> <td><input type="checkbox" name="Column_name" value="0" />0</td> <td><input type="checkbox" name="Column_name" value="1" />1</td> <td><input type="checkbox" name="Column_name" value="2" />2</td> </tr> <tr id ='tr2'> <td>Column_name_2</td> <td><input type="checkbox" name="Column_name_2" value="3" />3</td> <td><input type="checkbox" name="Column_name_2" value="4" />4</td> <td><input type="checkbox" name="Column_name_2" value="5" />5</td> </tr> </table> <br /> <button class="btn-disp">Display Selected IDs</button>