dongzhucha3999 2014-12-13 06:59
浏览 23
已采纳

动态追加和删除表行不起作用

I work in wordpress with WPMVC.

I am adding table rows dynamically in the form to add a record to the table.

Code:

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>

I tested the code with plnkr.co and it was successful. But here in my application, it is not even entering the script. What could be the flaw in this code?

  • 写回答

1条回答 默认 最新

  • donglingyi4679 2014-12-13 10:22
    关注

    Solved the issue by removing the html start and end tags for:

    'html' 'head' and 'body'

    It works fine now. Thanks all.

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥15 求差集那个函数有问题,有无佬可以解决
  • ¥15 【提问】基于Invest的水源涵养
  • ¥20 微信网友居然可以通过vx号找到我绑的手机号
  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
  • ¥15 解riccati方程组
  • ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名
  • ¥65 汇编语言除法溢出问题