HTML Table 동적 추가/삭제/조회

html

<table id="factory_table" class="table" style="margin-top: 20px;">
	<colgroup>
		<col width="20%"/>
		<col width="10%"/>
		<col width="30%"/>
		<col width="30%"/>
		<col width="10%"/>
	</colgroup>
	
	<thead>
		<tr>
			<th>이름(설비)</th>
			<th>대수</th>
			<th>기계 및 컨트롤러 정보</th>
			<th>공정명</th>
			<th></th>
		</tr>
	</thead>

	<tbody id="factory_tbody">
		<tr>
			<td> <input type="text" class="form-control" placeholder="설비명">  </td>
			<td> <input type="number" class="form-control" placeholder="설치 대수" onkeypress="return event.charCode >= 48 && event.charCode <= 57">  </td>
			<td> <input type="text" class="form-control" placeholder="기계 및 컨트롤러 정보">  </td>
			<td> <input type="text" class="form-control" placeholder="공정명">  </td>
			<td></td>
		</tr>
	</tbody>
</table>

Table 행 추가

// 하나의 Row 입력
var rowItem = "<tr>"
rowItem += "<td> <input type='text' class='form-control' placeholder='설비명'> </td>"
rowItem += "<td> <input type='number' class='form-control' placeholder='설치 대수' onkeypress='return event.charCode >= 48 && event.charCode <= 57'> </td>"
rowItem += "<td> <input type='email' class='form-control' placeholder='기계 및 컨트롤러 정보'> </td>"
rowItem += "<td> <input type='text' class='form-control' placeholder='공정명'> </td>"
rowItem += "<td> <button type='button' class='btn btn-danger'> <i class='fa fa-minus'></i> </button> </td>"
rowItem += "</tr>"
$('#factory_table').append(rowItem)




// Table 행을 모두 삭제 후 리스트 형식 입력 ( 예제와 별도 형식 )
var TableRowsList = ["'a','b','c','d','e'","'1','2','3','4','5'",,,,]  <-- Table rows list가 들어 있다는 가정..

$('#factory_table').remove();

var rowItem = '<tr>'
rowItem += '<th>이름(설비)</th>'
rowItem += '<th>대수</th>'
rowItem += '<th>기계 및 컨트롤러 정보</th>'
rowItem += '<th>공정명</th>'
rowItem += '<th></th>'
rowItem += '</tr>'
$('#factory_table').append(rowItem)
            
for(key in TableRowsList ){
    RowList = TableRowsList[key].split(',')
    var rowItem = '<tr>'
    rowItem += '<td> ' + RowList[1] + ' </td>'
    rowItem += '<td> ' + RowList[2] + ' </td>'
    rowItem += '<td> ' + RowList[3] + ' </td>'
    rowItem += '<td> ' + RowList[4] + ' </td>'
    rowItem += '<td> ' + RowList[5] + ' </td>'
    rowItem += '</tr>'
    $('#factory_table').append(rowItem)
}

Table 행 삭제

$('#factory_table').on("click", "button", function() {
    $(this).closest("tr").remove()
});

입력된 Table 행 데이터 가져오기

$('#factory_tbody tr').each(function () {
	var cellItem = $(this).find(":input")
	var itemObj = new Object()
	itemObj.title = cellItem.eq(0).val()
	itemObj.count = cellItem.eq(1).val()
	itemObj.info = cellItem.eq(2).val()
	itemObj.name = cellItem.eq(3).val()
})

참고

https://elfinlas.github.io/2017/12/25/devnote01/

12월 18일 개발일지 (HTML Table의 행을 동적으로 처리하기 with jQuery)