Question

＆＃13;

  var movies = [{
    "title": "The GodFather",
    "genre": "Drama",
    "year": "1978",
    "button": "<b>SHOW</b>",
    "dlt": "<b>DELETE</b>"
  }, {
    "title": "Superbad",
    "genre": "Comedy",
    "year": "1995",
    "button": "<b>SHOW</b>",
    "dlt": "<b>DELETE</b>"
  }, {
    "title": "The Departed",
    "genre": "Drama",
    "year": "2000",
    "button": "<b>SHOW</b>",
    "dlt": "<b>DELETE</b>"
  }, {
    "title": "The devil",
    "genre": "comedy",
    "year": "2003",
    "button": "<b>SHOW</b>",
    "dlt": "<b>DELETE</b>"
  }, {
    "title": "mummy returns",
    "genre": "horrer",
    "year": "2010",
    "button": "<b>SHOW</b>",
    "dlt": "<b>DELETE</b>"
  }];

  function dltRow(control) {

    document.getElementById("mytable").deleteRow(this);

  }

  $(document).ready(function() {
    for (var i = 0; i < movies.length; i++) {
      var x = '<tr><td>' + movies[i].title + "\n" + '</td><td>' + movies[i].genre + "\n" + '</td><td>' + movies[i].year + "\n" + '</td><td class="show"><button>' + movies[i].button + "\n" + '</button></td><td onclick=\"dltRow(this)\"><button>' + movies[i].dlt + "\n" + '</button></td></tr>';
      $('#mytable').append(x)
    };
    $('.show').click(function() {
      res = $(this).closest('tr').text();
      alert(res);
    })
  });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<body>
  <h1>MOVIES LIST</h1>
  <table id="mytable">
  </table>
</body>

</html>

＆＃13;

您好我使用jquery从json数据创建了html表...在我的表中有2个按钮显示和删除...如果我点击显示它应该在警告框中显示当前行详细信息..它正在显示..但它显示与显示和删除按钮..我想删除该显示和删除按钮..怎么做..请任何人帮助我?? ..

Answer 1

从所选元素中删除按钮：

＆＃13;

var movies = [{
  "title": "The GodFather",
  "genre": "Drama",
  "year": "1978",
  "button": "<b>SHOW</b>",
  "dlt": "<b>DELETE</b>"
}, {
  "title": "Superbad",
  "genre": "Comedy",
  "year": "1995",
  "button": "<b>SHOW</b>",
  "dlt": "<b>DELETE</b>"
}, {
  "title": "The Departed",
  "genre": "Drama",
  "year": "2000",
  "button": "<b>SHOW</b>",
  "dlt": "<b>DELETE</b>"
}, {
  "title": "The devil",
  "genre": "comedy",
  "year": "2003",
  "button": "<b>SHOW</b>",
  "dlt": "<b>DELETE</b>"
}, {
  "title": "mummy returns",
  "genre": "horrer",
  "year": "2010",
  "button": "<b>SHOW</b>",
  "dlt": "<b>DELETE</b>"
}];

function dltRow(control) {

  document.getElementById("mytable").deleteRow(this);

}

$(document).ready(function() {
  for (var i = 0; i < movies.length; i++) {
    var x = '<tr><td>' + movies[i].title + "\n" + '</td><td>' + movies[i].genre + "\n" + '</td><td>' + movies[i].year + "\n" + '</td><td class="show"><button>' + movies[i].button + "\n" + '</button></td><td onclick=\"dltRow(this)\"><button>' + movies[i].dlt + "\n" + '</button></td></tr>';
    $('#mytable').append(x)
  };
  $('.show').click(function() {
    res = $(this).closest('tr').clone().find('button').remove().end().text();//clone the element after that select the buttons using find then remove them, use end to go back to the cloned element(now without the buttons) to get the text 
    alert(res);
  })
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>

<body>
  <h1>MOVIES LIST</h1>
  <table id="mytable">
  </table>
</body>

</html>

＆＃13;

从json表中动态删除特定数据

1 个答案: