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

매출이 오르면 내리는 수수료! 지금 수수료센터에서 전자결제(PG)수수료 비교견적 신청해 보세요!
동적 테이블 row 추가/삭제 스크립트

QA

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

답변 2

본문

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

 

[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);
#그누보드5 #자바스크립트 #동적테이블 #추가삭제

이 질문에 댓글 쓰기 :

답변 2

myzone 자기소개 전체게시물 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

218.♡.♡.195


<?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 } ?>
그누구나님의 댓글
↳ 그누구나 자기소개 전체게시물 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색
211.♡.♡.74

감사합니다. 이렇게 수정해봤더니 테이블은 온전히 표시되고 또 잘 작동합니다.
하지만,
데이블 위에

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

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

그누위즈 홈페이지 자기소개 전체게시물 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

59.♡.♡.116

991170420_1635467335.6524.png

해당 부분에 보시면

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

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

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

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

답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 0
문의 PC 버전
© SIRSOFT
현재 페이지 제일 처음으로