動態追加和刪除表格行不起作用

我在表格中動態地添加表格行以向表格添加記錄。

代碼：

views/admin/edit.php 

<h2>Edit Geozone</h2> 

<?php echo $this->form->create($model->name); ?> 
<?php echo $this->form->input('geozone_name'); ?> 
<?php echo $this->form->input('state'); ?> 
<?php echo $this->form->input('ordering'); ?> 
<?php echo $this->form->end('Update'); ?> 

<!DOCTYPE html> 
<html> 
<head> 
<link data-require="[email protected]" data-semver="3.2.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" /> 
<script data-require="[email protected]" data-semver="3.2.0" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.js"></script> 
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js" data-semver="2.1.1" data-require="[email protected]"></script> 
<link rel="stylesheet" href="style.css" /> 
<script src="script.js"></script> 
</head> 
<body> 
    <table class="table table-striped" id="geozoneRule"> 
    <thead> 
     <tr> 
     <th colspan="3"> 
      <input type="button" class="btn btn-success" value="Add Rule" onclick="addGeozoneRule();" /> 
     </th> 
     </tr> 
     <tr> 
     <th>Country</th> 
     <th>Zone</th> 
     <th>Remove</th> 
     </tr> 
    </thead> 
    </table> 
</body> 
</html> 


<script> 
    var count = 0; 

    function addGeozoneRule() { 

    var html = ''; 
    html += '<tr>'; 
    html += '<td><select name="rule[' + count + '][country_id]"><option value="99">India</option><option value="100">Indonesia</option></select></td>'; 
    html += '<td><select name="rule[' + count + '][zone_id]"><option value="299">Chennai</option><option value="1100">some</option></select></td>'; 
    html += '<td><span class="btn btn-danger" onclick="removeTr(this)">Remove <i class="icon icon-remove"></i></span></td>'; 
    html += '</tr>'; 

    jQuery("#geozoneRule").append(html); 
    count++; 
} 

function removeTr(element) { 
    if (count > 1) { 
    jQuery(element).closest('tr').remove(); 
    count--; 
    } else { 
    alert('Keep one row'); 
    } 
</script>

我測試了plnkr.co的代碼，它是成功的。但在我的應用程序中，它甚至沒有輸入腳本。這個代碼有什麼缺陷？

「HTML」「頭」和「身體」

現在工作得很好：

來源

2014-12-13 Prabhu Chelladurai

通過移除HTML開始和結束標記爲解決這個問題。謝謝大家。

來源

2014-12-13 10:22:53

動態追加和刪除表格行不起作用

回答

相關問題