jsp中的横向展示栏里的属性如何添加框框

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<%@ include file="/WEB-INF/views/include/taglib.jsp"%>

<%@page import="java.util.Map"%>

<%@page import="java.util.HashMap"%>

<%@page import="java.util.ArrayList"%>

<%@page import="java.util.List"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>


<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->

<link rel="stylesheet"

href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"

integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"

crossorigin="anonymous">



</head>

<body onload="init()">

<table class="table">

<thead>

<tr id="theader">


</tr>

</thead>

<form id="fm">

<tbody id="tbody">


</tbody>

</form>

</table>



<script type="text/javascript">

function init() {

$.ajax({

url : "http://localhost:8088/opa/a/opa/opaSummary/tableheader",

type : "get",

data : "",

dataType : "JSON",

success : function(data) {

var str = "<th styl>id</th><th>考核部门</th>";

for (var i = 0; i < data.length; i++) {

str += "<th>" + data[i].name + "</th>";

}

str += "<th>操作</th>";

console.log(str);

$("#theader").html(str);

},

error : function() {

}

});


$.ajax({

url : "http://localhost:/view",

type : "get",

data : "",

dataType : "JSON",

success : function(data) {

data1 = data.data;

data1 = JSON.parse(data1);

var str = "";

var stro = 1;

for (var i = 0; i < data1.length; i++) {

console.log(data1[i].id);

console.log(data1[i].rep_org_name);

str += "<tr>" + "<td > <input type='text' id='sp"+(i+1)+"' value='" + data1[i].id + "' ></input></td>"

+ "<td>" + data1[i].rep_org_name

+ "</td>";

for (var j = 1; j <= 14; j++) {

str += "<td><input type='text' id='text"+i+j+"' /></td>";

}

str += "<td><button id='"+(i+1)+"' onclick='saveOrUpData(this)'>保存</button></td>";

str += "</tr>";

}

$("#tbody").html(str);

},

error : function() {


}

});

};

function saveOrUpData(e){

var bid=$(e).attr("id");

var tr=$("#sp"+bid).val();

console.info(tr);

var i=bid%10;

var j=parseInt(bid/10);

var  yearResult = $("#text"+j+1+"").val();

var  convertScore  = $("#text"+j+2+"").val();

var  leadingScore  = $("#text"+j+3+"").val();

var  countyScore = $("#text"+j+4+"").val();

var  peerReview = $("#text"+j+5+"").val();

var  leadershipAssessment = $("#text"+j+6+"").val();

var  serviceRating = $("#text"+j+7+"").val();

var  assessmentScore = $("#text"+j+8+"").val();

var  overallScore = $("#text"+j+9+"").val();

var  projectsScore = $("#text"+j+10+"").val();

var recogintionScore = $("#text"+j+11+"").val();

var deduction = $("#text"+j+12+"").val();

var annualScore = $("#text"+j+13+"").val();

var daiScore = $("#text"+j+14+"").val();

var office =  tr;

var level = 1;

var sendData="yearResult="+yearResult+"&convertScore="+convertScore+"&leadingScore="+leadingScore+"&countyScore="+

countyScore+"&peerReview="+peerReview+"&leadershipAssessment="+leadershipAssessment+"&serviceRating="+serviceRating+

"&assessmentScore="+assessmentScore+"&overallScore="+overallScore+"&projectsScore="+projectsScore+"&recogintionScore="+

recogintionScore+"&deduction="+deduction+"&annualScore="+annualScore+"&daiScore="+daiScore;

$.ajax({

url:"http://localhost/save",

type:"POST",

data:sendData,

dataType:"",

success:function(){

}

});

}

</script>



<script src="${ctxStatic}/autoHeader/src/js/jquery.min.js"></script>

<script src="${ctxStatic}/autoHeader/src/js/bootstrap.js"></script>

</body>

</html>