동적 테이블 row 추가/삭제 스크립트

동적 테이블 row 추가/삭제 스크립트

QA

동적 테이블 row 추가/삭제 스크립트

본문

아래와 같은 다국어 학습사전을 만드는 중입니다.

 

[view 화면]

3542522442_1635464637.4362.png

위 view 화면을 뿌려주기 위한 데이터 입력 페이지인 write 화면은 아래와 같습니다.

[write 화면]

3542522442_1635464564.6441.png

 

항목입력 화면에서는 단어의 뜻을 순번과 품사, 뜻, 참조어; 또는 예시 표현, 그 해석을 입력하도록 합니다.

단의의 뜻과 예문을 어느 곳에서건 추가하기 위해서 테이블 하단에만 새 row가 추가되는 것이 아니라,

추가 버턴을 누르는 위치 바로 아래에 새로운 row가 추가되서 새 항목들을 입력해야 합니다.

 

이미 DB에 데이터가 입력된 단어를 열어 수정할 경우에는 위 그림과 같이 잘 표시되고 추가 입력도 잘 작동합니다.

 

문제는, 새로운 단어를 등록하려고 write 페이지를 열면, 아래 그림과 같이 테이블의 입력 row가 나타나질 않습니다.

이 문제를 해결할 수 있는지요? 

 

3542522442_1635466013.964.png

해당 부분의 스크립트 입니다.

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

경고가 뿌려지네요.
이걸 해결할 방법은 없으신지?

991170420_1635467335.6524.png

해당 부분에 보시면

조건문으로 if ($w == 'u') 라고 되어있습니다.

이 부분은 글쓰기 상태가 수정인 경우 해당 입력란이 출력되는 것이고,

신규 글쓰기시 해당 입력란이 나타나게 하려면

else 구문을 추가하여, 기본 input을 넣어두시면됩니다.

답변을 작성하시기 전에 로그인 해주세요.
전체 934
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT