Question

我写了一个代码来在bootstrap表中显示json数据。这是如何在modal-box中添加一个新行...并且可以在模态框中添加标题和数据..

例如：

Reg.NO： 1122340

学生姓名：约翰

部门： CSE

Yop： 2016

    <!DOCTYPE html>
    <html>
    <head>
       <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.1.1/jquery.min.js"></script>
       <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
       
    <script>
    var studentDetails=[
    {
    "regno":"1122340",
    "name":"John",
    "dept":"CSE",
    "yop": "2016",
    "action":"Show"
    },
    {
    "regno":"1122341",
    "name":"Brisen",
    "dept": "MECH",
    "yop":"2015",
    "action":"Show"
    },
    {
    "regno":"1122342",
    "name":"Moksha",
    "dept": "EEE",
    "yop":"2016",
    "action":"Show"
    },
    {
    "regno":"1122343",
    "name":"Mano",
    "dept": "IT",
    "yop":"2013",
    "action":"Show"
    },
    {
    "regno":"1122344",
    "name":"Jothish",
    "dept": "AERO",
    "yop":"2012",
    "action":"Show"
    }
    ];
    
    $(document).ready(function(){
    
    for(var i=0;i<studentDetails.length;i++)
    {
      var tab='<tr><td>'+ studentDetails[i].regno +"\n"+'</td><td>'+ studentDetails[i].name +"\n"+'</td><td>'+
       studentDetails[i].dept +"\n"+'</td><td>'+ studentDetails[i].yop +"\n"+'</td><td><button class="show" data-toggle="modal"  data-target="#myModal" data-html="true">'+
        studentDetails[i].action +'</button></td></tr>';
        $('#student').append(tab)
    };
    $(".show").click(function(){
    $(".modal-body").html('');
    res=$(this).closest('tr').clone().find('button').remove().end().text();
    $(".modal-body").append(res);
    });
    }); 
    </script>
    
    </head>
    <body>
    
        <div class="container">
          <div class="modal fade" id="myModal" role="dialog">
            <div class="modal-dialog">
              <div class="modal-content">
                <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal">&times;</button>
                  <h4 class="modal-title">Student Details</h4>
                  </div>
                  <div class="modal-body">
                  </div>
                  <div class="modal-footer">
                  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
              </div>
            </div>
          </div>
        </div>
        <table class="table table-striped" id="student">
        	<tr>
        	<th>Register No</th>
        	<th>Student Name</th>
        	<th>Department</th>
        	<th>Year Of Passed Out</th>
        	<th>Action</th>
        	</tr>
        </table>
    
    </body>
    </html>

Answer 1

最简单的方式（imho）可以做这样的事情：

res=$(this).closest('tr').clone().find('button').remove().end().text();
reso=res.split("\n");

reso='Reg.NO:'+reso[0]+'<br>Student Name:'+reso[1]+'<br>Department:'+reso[2]+'<br>Yop:'+reso[3];
$(".modal-body").append(reso);

演示：https://jsfiddle.net/ar63c0qL/

如何在bootstrap模式框中添加新行

1 个答案: