동적 테이블 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을 넣어두시면됩니다.

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

회원로그인

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