html table 추가 json 데이터 만들기

html 테이블 추가

html table 추가 기능
프로젝트에 기능이 필요하여 작성
json 데이터가 hidden(id=pData)에 문자열로 입력됩니다.

<div>
    <input type="button" value="테이블 추가" onclick="addTable();">
    <input type="button" value="JSON 데이터 만들기" onclick="generateJSON();">
    <input type="button" value="커밋" onclick="testJson();">
</div>

<!-- 테이블을 추가할 컨테이너 -->
<div id="tableContainer"></div>


<script type="text/javascript">
var tableCount = 0; // 추가된 테이블 수를 카운트하기 위한 변수

function addTable() {
    tableCount++; // 테이블 수 증가

    // 새로운 테이블 요소 생성
    const newTable = document.createElement('table');
    newTable.style.border = '1px solid black'; // 테이블 테두리 스타일 설정

    // 테이블 행 추가
    newTable.innerHTML = '<tr>' +
        '<td>이름</td>' +
        '<td><input type="text" name="name"></td>' +
        '</tr>' +
        '<tr>' +
        '<td>종류</td>' +
        `<td>` +
        '<select name="sel">' +
        '<option value="">선택</option>' +
        '<option value="1">분기</option>' +
        '<option value="2">연도</option>' +
        '</select>' +
        '</td>' +
        '</tr>' +
        '<tr>' +
        '<td>사용여부</td>' +
        '<td>' +
        '<input type="radio" id="radY' + tableCount + '" name="rad' + tableCount + '" value="Y">' +
        '<label for="radY' + tableCount + '">사용</label>' +
        '<input type="radio" id="radN' + tableCount + '" name="rad' + tableCount + '" value="N" checked>' +
        '<label for="radN' + tableCount + '">미사용</label>' +
        '</td>' +
        '</tr>' +
        '<tr>' +
        '<td>질문</td>' +
        '<td><textarea name="desc" rows="4" cols="50"></textarea></td>' +
        '</tr>';

    // 테이블 컨테이너에 새로운 테이블 추가
    const tableContainer = document.getElementById('tableContainer');
    tableContainer.appendChild(newTable);

    // 추가된 테이블 아래에 가로 구분선 추가
    if (tableCount > 1) {
        const hr = document.createElement('hr');
        tableContainer.appendChild(hr);
    }
}

function generateJSON() {
    const tables = document.querySelectorAll('#tableContainer table');
    const jsonData = [];

    tables.forEach((table, index) => {
        const inputs = table.querySelectorAll('input[type="text"], select, input[type="radio"]:checked, textarea');
        const tableData = {};

        inputs.forEach(input => {
        	const name = (input.name.indexOf('rad') > -1) ? input.name.substring(0,3) : input.name;
            
            /* if(name.indexOf('rad') > -1){
            	name = name.substring(0,3);
            } */
            
            const value = input.value;

            if (name) {
                tableData[name] = value;
            }
        });

        jsonData.push(tableData);
    });

    $('#pData').val(JSON.stringify(jsonData));
}
</script>

<input type="hidden" id="pData" name="pData">