動態追加和刪除表行不起作用
[英]Dynamic append and remove table rows not working
問題描述
我在WPMVC中使用wordpress。
我在窗體中動態添加表行以向表添加記錄。
碼：
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="bootstrap@3.2.0" data-semver="3.2.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" />
<script data-require="bootstrap@3.2.0" 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="jquery@2.1.1"></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上測試了代碼，它成功了。 但是在我的應用程序中，它甚至沒有輸入腳本。 此代碼中的缺陷可能是什么？
1 個解決方案
解決方案1
0 已采納 2014-12-13 10:22:53
通過刪除以下內容的html開始和結束標簽解決了該問題：
'html'，'head'和'body'
現在工作正常。 謝謝大家
jQuery追加並刪除動態表行
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.