JS结合bootstrap实现基本的增删改查功能

让我来给你讲一下如何使用JS结合Bootstrap实现基本的增删改查功能的完整攻略。我们将通过两个示例来讲解。

示例一-学生管理系统

一、准备工作

1.首先需要在我们的HTML文件中引用Bootstrap和jQuery库。这可以通过以下代码进行实现：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

2.搭建HTML结构

我们需要创建一个表格展示学生的信息。代码如下：

<div class="container">
  <h2>学生管理系统</h2>
  <table class="table table-hover">
    <thead>
      <tr>
        <th>ID</th>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>

    </tbody>
  </table>
</div>

二、添加学生信息

在点击“添加学生”按钮时，弹出一个模态框，用户可以在该模态框中填写响应信息并保存。

我们可以使用如下JS代码实现弹出模态框：

$('#add-student').click(function(){
  $('#addModal').modal();
});

其中，#add-student为我们在HTML文件中定义的添加学生按钮，#addModal为我们在HTML文件中定义的添加学生模态框。

我们需要绑定保存表单的按钮，代码如下：

$('#save').click(function(){
  var id = $('#id').val();
  var name = $('#name').val();
  var gender = $('input[name=gender]:checked').val();
  var age = $('#age').val();

  var row = '<tr>' +
     '<td>' + id + '</td>' +
     '<td>' + name + '</td>' +
     '<td>' + gender + '</td>' +
     '<td>' + age + '</td>' +
     '<td>' +
     '<button class="btn btn-danger delete">删除</button>' +
     '<button class="btn btn-info edit">编辑</button>' +
     '</td>' +
     '</tr>';

  $('tbody').append(row);
  $('#addModal').modal('hide');
});

在将数据添加到表格中后，我们需要关闭模态框，代码如下：

$('#addModal').modal('hide');

三、编辑学生信息

我们需要在表格的每一行加上“编辑”按钮，方便用户编辑学生的相关信息。

在点击“编辑”按钮时，弹出一个模态框，用户可以修改响应信息并保存。

我们可以使用如下JS代码实现弹出模态框：

$(document).on('click', '.edit', function(){
  $('#id').val($(this).closest('tr').find('td:eq(0)').text());
  $('#name').val($(this).closest('tr').find('td:eq(1)').text());
  $('#age').val($(this).closest('tr').find('td:eq(3)').text());

  var gender = $(this).closest('tr').find('td:eq(2)').text();
  if(gender == '男'){
    $('#male').prop('checked', true);
  }
  else
  {
    $('#female').prop('checked', true);
  }

  $('#myModal').modal();
});

其中，#myModal为我们在HTML文件中定义的编辑学生模态框。

绑定保存表单的按钮：

$('#update').click(function(){
  var id = $('#id').val();
  var name = $('#name').val();
  var gender = $('input[name=gender]:checked').val();
  var age = $('#age').val();

  $(this).closest('tr').find('td:eq(0)').text(id);
  $(this).closest('tr').find('td:eq(1)').text(name);
  $(this).closest('tr').find('td:eq(2)').text(gender);
  $(this).closest('tr').find('td:eq(3)').text(age);

  $('#myModal').modal('hide');
});

在修改数据后，我们需要关闭模态框，代码如下：

$('#myModal').modal('hide');

四、删除学生信息

我们需要在表格的每一行加上“删除”按钮，方便用户删除学生的相关信息。

$(document).on('click', '.delete', function(){
  $(this).closest('tr').remove();
});

示例二-ToDoList

一、准备工作

1.首先需要在我们的HTML文件中引用Bootstrap和jQuery库。这可以通过以下代码进行实现：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

2.搭建HTML结构

我们需要创建一个列表展示任务的信息。代码如下：

<div class="container">
  <h2>ToDoList</h2>
  <ul class="list-group">

  </ul>

  <div class="input-group">
    <input type="text" class="form-control" placeholder="输入任务...">
    <span class="input-group-btn">
      <button class="btn btn-primary add" type="button">添加</button>
    </span>
  </div>
</div>

二、添加任务

在点击“添加”按钮时，将用户输入的内容添加到列表中。

$('.add').click(function(){
  var item = $('input').val();
  $('.list-group').append('<li class="list-group-item">' + item +
                          '<button class="btn btn-danger btn-sm pull-right delete">' +
                          '<span class="glyphicon glyphicon-trash"></span>' +
                          '</button>' +
                          '</li>');
  $('input').val('');
});

三、删除任务

我们需要在列表的每一行加上“删除”按钮，方便用户删除任务。

$(document).on('click', '.delete', function(){
  $(this).closest('li').remove();
});

以上是使用JS结合bootstrap实现基本的增删改查功能的完整攻略，希望对你有帮助。