동적 테이블 row 추가/삭제 스크립트
본문
아래와 같은 다국어 학습사전을 만드는 중입니다.
[view 화면]
위 view 화면을 뿌려주기 위한 데이터 입력 페이지인 write 화면은 아래와 같습니다.
[write 화면]
항목입력 화면에서는 단어의 뜻을 순번과 품사, 뜻, 참조어; 또는 예시 표현, 그 해석을 입력하도록 합니다.
단의의 뜻과 예문을 어느 곳에서건 추가하기 위해서 테이블 하단에만 새 row가 추가되는 것이 아니라,
추가 버턴을 누르는 위치 바로 아래에 새로운 row가 추가되서 새 항목들을 입력해야 합니다.
이미 DB에 데이터가 입력된 단어를 열어 수정할 경우에는 위 그림과 같이 잘 표시되고 추가 입력도 잘 작동합니다.
문제는, 새로운 단어를 등록하려고 write 페이지를 열면, 아래 그림과 같이 테이블의 입력 row가 나타나질 않습니다.
이 문제를 해결할 수 있는지요?
해당 부분의 스크립트 입니다.
write.skin.php
<?php
//$wr_6; //품사/예문
//$wr_7; //의미/표현
//$wr_8; //연관어(유의어,상대어,속어)/번역문
if ($w == "u") {
$wr_6x = explode("|",substr($write['wr_6'],1));
$wr_7x = explode("|",substr($write['wr_7'],1));
$wr_8x = explode("|",substr($write['wr_8'],1));
}
?>
<div style="height:10px;"> </div>
<label for="wr_4" class="user-label">항목 입력</label>
<!-----//source https://coursesweb.net/javascript/add-delete-rows-table-javascript ---------->
<table id="table1" border="0" style="border:0px solid #ccc">
<!--col width="4%"></col-->
<col width="8%"></col>
<col width="38%"></col>
<col width="38%"></col>
<col width="8%"></col>
<col width="8%"></col>
<tr>
<!--th>ID</th-->
<th style="border:1px solid #ccc">구분</th>
<th style="border:1px solid #ccc">번역/표현</th>
<th style="border:1px solid #ccc">참조어/해석</th>
<th style="border:1px solid #ccc">Delete</th>
<th style="border:1px solid #ccc">Add Rows</th>
</tr>
<?php if ($w == "u") { ?>
<div>
<?php for ($i = 0; $i < count($wr_6x); $i++) { ?>
<tr>
<!--td class="tbl_id" style="text-align:center">1</td-->
<td style="border:1px solid #ccc"><input class='frm_input_a' name='wr_6x[]' type='text' required itemname='구분' value='<?php echo $wr_6x[$i];?>' maxlength='20'></td>
<td style="border:1px solid #ccc"><input class='frm_input_b' name='wr_7x[]' type='text' itemname='번역/표현' value='<?php echo $wr_7x[$i]; ?>' maxlength='120'></td>
<td style="border:1px solid #ccc"><input class='frm_input_b' name='wr_8x[]' type='text' itemname='참조어/해석' value='<?php echo $wr_8x[$i]; ?>' maxlength='120'></td>
<td style="border:1px solid #ccc"><input type="button" value="Delete" onclick="ob_adRows.delRow(this)"/></td>
<td style="border:1px solid #ccc"><input type="button" value="Add Row" onclick="ob_adRows.addRow(this)"/></td>
</tr>
<?php } ?>
</div>
<?php } ?>
<table id=dyntbl1 width="100%" cellspacing=1 cellpadding=3 bgcolor="#EEEEEE">
<col align="center" width="8%"></col>
<col align="center" width="38%"></col>
<col align="center" width="38%"></col>
<col align="center" width="8%"></col>
<col align="center" width="8%"></col>
</table>
<div>
<input style="float:right; margin:5px 2px" type="button" value="Add Row at end" onclick="ob_adRows.addRow()"/>
</div>
<script>
//JS class to add/delete rows in html table - https://coursesweb.net/javascript/
//receives table id
function adRowsTable(id){
var table = document.getElementById(id);
var me = this;
if(document.getElementById(id)){
var row1 = table.rows[1].outerHTML;
//adds index-id in cols with class .tbl_id
function setIds(){
var tbl_id = document.querySelectorAll('#'+ id +' .tbl_id');
for(var i=0; i<tbl_id.length; i++) tbl_id[i].innerHTML = i+1;
}
//add row after clicked row; receives clicked button in row
me.addRow = function(btn){
btn ? btn.parentNode.parentNode.insertAdjacentHTML('afterend', row1): table.insertAdjacentHTML('beforeend',row1);
setIds();
}
//delete clicked row; receives clicked button in row
me.delRow = function(btn){
btn.parentNode.parentNode.outerHTML ='';
setIds();
}
}
}
//create object of adRowsTable(), pass the table id
var ob_adRows = new adRowsTable('table1');
</script>
write_update.skin.php
//$wr_6; //품사/예문
//$wr_7; //의미/표현
//$wr_8; //연관어(유의어,상대어,속어)/번역문
for ($i = 0; $i < count($wr_6x); $i++)
{
$wr_6 = $wr_6."|".$wr_6x[$i];
$wr_7 = $wr_7."|".$wr_7x[$i];
$wr_8 = $wr_8."|".$wr_8x[$i];
}
$sql678 = "update $write_table set
wr_6 = '$wr_6',
wr_7 = '$wr_7',
wr_8 = '$wr_8'
where wr_id = '$wr_id' ";
sql_query($sql678);
답변 2
<?php if ($w == "u") { ?>
<div>
<?php for ($i = 0; $i < count($wr_6x); $i++) { ?>
<tr>
<!--td class="tbl_id" style="text-align:center">1</td-->
<td style="border:1px solid #ccc"><input class='frm_input_a' name='wr_6x[]' type='text' required itemname='구분' value='<?php echo $wr_6x[$i];?>' maxlength='20'></td>
<td style="border:1px solid #ccc"><input class='frm_input_b' name='wr_7x[]' type='text' itemname='번역/표현' value='<?php echo $wr_7x[$i]; ?>' maxlength='120'></td>
<td style="border:1px solid #ccc"><input class='frm_input_b' name='wr_8x[]' type='text' itemname='참조어/해석' value='<?php echo $wr_8x[$i]; ?>' maxlength='120'></td>
<td style="border:1px solid #ccc"><input type="button" value="Delete" onclick="ob_adRows.delRow(this)"/></td>
<td style="border:1px solid #ccc"><input type="button" value="Add Row" onclick="ob_adRows.addRow(this)"/></td>
</tr>
<?php } ?>
</div>
<?php } ?>
를
<?php
$wr6_cnt = count($wr_6x);
if(!$wr6_cnt){
$wr6_cnt = 1;
}
for ($i = 0; $i < $wr6_cnt; $i++) { ?>
<tr>
<!--td class="tbl_id" style="text-align:center">1</td-->
<td style="border:1px solid #ccc"><input class='frm_input_a' name='wr_6x[]' type='text' required itemname='구분' value='<?php echo $wr_6x[$i];?>' maxlength='20'></td>
<td style="border:1px solid #ccc"><input class='frm_input_b' name='wr_7x[]' type='text' itemname='번역/표현' value='<?php echo $wr_7x[$i]; ?>' maxlength='120'></td>
<td style="border:1px solid #ccc"><input class='frm_input_b' name='wr_8x[]' type='text' itemname='참조어/해석' value='<?php echo $wr_8x[$i]; ?>' maxlength='120'></td>
<td style="border:1px solid #ccc"><input type="button" value="Delete" onclick="ob_adRows.delRow(this)"/></td>
<td style="border:1px solid #ccc"><input type="button" value="Add Row" onclick="ob_adRows.addRow(this)"/></td>
</tr>
<?php } ?>
감사합니다. 이렇게 수정해봤더니 테이블은 온전히 표시되고 또 잘 작동합니다.
하지만,
데이블 위에
Warning: count(): Parameter must be an array or an object that implements Countable in E:\www\5424mto54f1ym\skin\board\g5_dictionary-32431\write.skin.php on line 407
경고가 뿌려지네요.
이걸 해결할 방법은 없으신지?
해당 부분에 보시면
조건문으로 if ($w == 'u') 라고 되어있습니다.
이 부분은 글쓰기 상태가 수정인 경우 해당 입력란이 출력되는 것이고,
신규 글쓰기시 해당 입력란이 나타나게 하려면
else 구문을 추가하여, 기본 input을 넣어두시면됩니다.
답변을 작성하시기 전에 로그인 해주세요.