Вопросы Теги

Правильно отображать таблицу с помощью вкладок

  1. Строки неизменяемы в Java, если вы храните пароль в виде обычного текста, он будет доступен в памяти до тех пор, пока сборщик мусора не очистит его, и поскольку строки используются в пуле строк для повторного использования, существует довольно высокая вероятность того, что он будет остаются в памяти в течение длительного времени, что создает угрозу безопасности. Поскольку любой, у кого есть доступ к дампу памяти, может найти пароль в тексте clear
  2. Java с использованием метода getPassword() JPasswordField, который возвращает метод char [] и устаревший метод getText(), который возвращает пароль в текстовом выражении причина безопасности.
  3. toString () всегда существует риск печати обычного текста в файле журнала или консоли, но если вы используете Array, вы не будете печатать содержимое массива, а его память будет распечатана. 
    String strPwd = "passwd";
char[] charPwd = new char[]{'p','a','s','s','w','d'};
System.out.println("String password: " + strPwd );
System.out.println("Character password: " + charPwd );
    String password: passwd Пароль персонажа: [C @ 110b2345

Заключительные мысли: хотя использование char [] не только достаточно, вам нужно стереть контент, чтобы быть более безопасным. Я также предлагаю работать с хешированным или зашифрованным паролем вместо обычного текста и освобождать его из памяти, как только будет завершена аутентификация.

2
задан Zakaria Acharki 29 March 2019 в 08:52
поделиться

1 ответ

Основная проблема связана с дублирующимися идентификаторами, #Section1,#Section2,#Section3,#Section4 Я изменил их во втором ряду на #Section5,#Section6,#Section7,#Section8, и вы могли видеть, что это работает.

ПРИМЕЧАНИЕ. Идентификатор должен быть уникальным в том же документе. 

.closedArrow {
  <!-- background: url('http://is200.imagesocket.com/images/2014/10/29/2716484-3exx.png') no-repeat 1px 1px;
  -->padding-left: 20px;
  padding-bottom: 10px;
  padding-top: 4px;
  cursor: pointer;
}

.openArrow {
  <!-- background: url('http://is200.imagesocket.com/images/2014/10/29/2716483-0cvp.png') no-repeat 1px 1px;
  -->padding-left: 20px;
  cursor: pointer;
}

.steps {
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
  overflow: hidden;
}

.green {
  background: #7dba00 !important;
  color: #666666 !important;
}

.grey {
  color: #666666 !important;
}

.open .green:after {
  border-left-color: #7dba00 !important;
}

.wrap .num.last:after {
  display: none
}

.wrap .num.last:before {
  display: none
}

.black {
  background: #000 !important;
  color: #fff!important;
}

.open .black:after {
  border-left-color: #000 !important;
  color: #fff!important;
}

.steps li {
  float: left;
  position: relative;
}

.wrap {
  float: left;
}

.num {
  width: 30px;
  height: 30px;
  line-height: 30px;
  border-radius: 50%;
  background: #7dba00;
  color: #000;
  font-weight: bold;
  text-align: center;
  float: left;
  position: relative;
  margin: 0 4px 0 0;
}

.num b,
.steps p span {
  position: relative;
  z-index: 2;
  display: block;
}

.num:after {
  content: " ";
  width: 0;
  height: 0;
  border-top: 14px solid #fff;
  border-bottom: 14px solid #fff;
  border-left: 14px solid #7dba00;
  position: absolute;
  right: -4px;
  top: 1px;
}

.steps p {
  background: #fff;
  margin: 0;
  float: left;
  height: 30px;
  line-height: 14px;
  font-size: 10px;
  width: 10em;
  padding: 0 10px 0 0px;
  text-align: center;
}

.closed .num:after {
  border-left-color: #000
}

.closed .num {
  color: #fff;
  background: #000
}

.closed .num.last:after {
  display: none
}

.open .num:after {
  border-left-color: #ccc;
  border-top-color: transparent;
  border-bottom-color: transparent;
  z-index: 1;
}

.open .num:before {
  width: 0;
  height: 0;
  content: " ";
  position: absolute;
  border-top: 15px solid #fff;
  border-bottom: 15px solid #fff;
  border-left: 15px solid #7dba00;
  position: absolute;
  right: -5px;
  top: 0;
  z-index: 0;
}

.open .num {
  background: #ccc;
}

.open .wrap {
  border-radius: 15px 0 0 15px;
  border: 1px solid #7dba00;
}

li.open:after {
  content: " ";
  width: 0;
  height: 0;
  border-top: 16px solid #fff;
  border-bottom: 16px solid #fff;
  border-left: 15px solid #7dba00;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 0;
}

li.open:before {
  width: 0;
  height: 0;
  content: " ";
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-left: 14px solid #fff;
  position: absolute;
  right: 1px;
  top: 1px;
  z-index: 1;
}

.expanded {
  display: none;
  <!--bbackground-color: red;
  -->padding-right: 900px;
}

.tab {
  <!--background-color: yellow;
  --><!--border: 2px solid black;
  -->border-collapse: collapse;
  box-shadow: inset 0 1px 0 #fff;
  font-size: 12px;
  line-height: 15px;
  text-align: left;
  width: 85%;
  margin-left: 230px;
}

.column {
  float: left;
  width: 25%;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

.completed span {
  background-color: NONE;
  color: #95db89;
  border: 2px solid #95db89;
}

.todo span {
  background-color: none;
  color: #E1E6EB;
  border: 2px solid #E1E6EB;
}

.list span {
  color: #58D68D;
  font-weight: 500;
  font-size: 12px;
}

.breadcrumb-pagination div p {
  text-align: center;
  line-height: 0;
  margin: 30px auto 25px;
}

.active p {
  border-bottom: 2px solid #00abc9;
  padding-bottom: 27px;
  margin-bottom: 0px !important;
  color: #3c4043;
  font-weight: 700;
}

.completed p {
  color: #bsb7c1;
}

.list p {
  color: #3c4043;
  font-weight: 700;
}

.completed span::before {
  content: '\2713'
}

.title {
  text-align: center;
  text-decoration: none;
  margin-left: 365px;
  color: #444;
}

table {
  border-collapse: collapse;
  box-shadow: inset 0 1px 0 #fff;
  font-size: 15px;
  line-height: 15px;
  text-align: left;
  width: 98%;
}

th {
  background: linear-gradient(#000000, #4d4d4d);
  border-left: 1px solid #555;
  border-right: 1px solid #777;
  border-top: 1px solid #555;
  border-bottom: 1px solid #333;
  box-shadow: inset 0 1px 0 #999;
  color: #fff;
  font-weight: bold;
  padding: 10px 15px;
  position: relative;
  text-shadow: 0 1px 0 #000;
}

th:after {
  background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, .08));
  content: '';
  display: block;
  height: 15%;
  left: 0;
  margin: 1px 0 0 0;
  position: absolute;
  top: 25%;
  width: 100%;
}

th:first-child {
  border-left: 1px solid #777;
  box-shadow: inset 1px 1px 0 #999;
}

th:last-child {
  box-shadow: inset -1px 1px 0 #999;
}

td {
  border-right: 1px solid #fff;
  border-left: 1px solid #e8e8e8;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #e8e8e8;
  padding: 8px;
  position: relative;
  transition: all 300ms;
}

td:first-child {
  box-shadow: inset 1px 0 0 #fff;
}

td:last-child {
  border-right: 1px solid #e8e8e8;
  box-shadow: inset -1px 0 0 #fff;
}

tr {
  background: url(https://jackrugile.com/images/misc/noise-diagonal.png);
}

tr:nth-child(odd) td {
  background: #f1f1f1 url(https://jackrugile.com/images/misc/noise-diagonal.png);
}

tr:last-of-type td {
  box-shadow: inset 0 -1px 0 #fff;
}

tr:last-of-type td:first-child {
  box-shadow: inset 1px -1px 0 #fff;
}

tr:last-of-type td:last-child {
  box-shadow: inset -1px -1px 0 #fff;
}

h1 {
  color: #444;
  text-shadow: 1px 0px 1px #ccc, 0px 1px 1px #eee, 2px 1px 1px #ccc, 1px 2px 1px #eee, 3px 2px 1px #ccc, 2px 3px 1px #eee, 4px 3px 1px #ccc, 3px 4px 1px #eee, 5px 4px 1px #ccc, 4px 5px 1px #eee, 6px 5px 1px #ccc, 5px 6px 1px #eee, 7px 6px 1px #ccc;
}

a:hover,
a:focus {
  outline: none;
  text-decoration: none;
}

.tab {
  text-align: center;
}

.tab .nav-tabs {
  display: inline-block;
  position: relative;
  border-bottom: none;
}

.tab .nav-tabs li {
  margin: 0;
}

.tab .nav-tabs li a {
  display: block;
  padding: 80px 25px 0 25px;
  background: #fff;
  font-size: 17px;
  font-weight: 700;
  color: #999;
  text-transform: uppercase;
  text-align: center;
  border-radius: 0;
  border: none;
  border-bottom: 2px solid #fff;
  margin-right: 0;
  overflow: hidden;
  z-index: 1;
  position: relative;
  transition: all 0.3s ease 0s;
}

.tab .nav-tabs li a span {
  display: block;
  width: 50px;
  height: 50px;
  line-height: 50px;
  background: #f2f2f2;
  margin: auto;
  font-size: 22px;
  color: #999;
  border-radius: 5px;
  position: absolute;
  top: 10px;
  left: 0;
  right: 0;
  transform: rotate(45deg);
}

.tab .nav-tabs li.active a span {
  background: #29335c;
  color: #fff;
}

.tab .nav-tabs li a span i {
  transform: rotate(-45deg);
}

.tab .nav-tabs li.active a,
.tab .nav-tabs li a:hover {
  color: black;
  border: none;
  border-bottom: 2px solid #fff;
}

.tab .nav-tabs li.active a {
  border-bottom: 2px solid #29335c;
}

.tab .tab-content {
  padding: 30px 0 0 19px;
  margin-top: -5px;
  font-size: 15px;
  color: black;
  line-height: 26px;
  text-align: left;
  border-top: 1px solid #e5e5e5;
  width: 600px;
}

.tab .tab-content .tab-pane #Section3_table {
  margin-left: -8px;
}

.tab .tab-content h3 {
  font-size: 24px;
  margin-top: 0;
}

@media only screen and (max-width: 479px) {
  .tab .nav-tabs li {
    width: 100%;
    text-align: center;
    margin-bottom: 5px;
  }
  .tab .nav-tabs li:last-child {
    margin-bottom: 0;
  }
}
<!DOCTYPE html>
<html>

<head>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

</head>

<body>
  <title> Order Tracking System </title>
  <center>
    <h1> ORDER TRACKING SYSTEM </h1>
    <br>
    <table class="bts_table">
      <tr>
        <th>ORDER NUMBER</th>
        <th>CUSTOMER NAME</th>
        <th>LOCATION</th>
      </tr>

      <form action="save.php" method="POST">
        <td valign="top"><span class="closedArrow"> 12345 </span></td>
        <td valign="top"><span class="closedArrow"> JOHN </span></td>
        <td valign="top" class="collapsed">
          <ol class="steps">
            <li>
              <div class="num green"><b>1</b></div>
            </li>
            <li>
              <div class="num green"><b>2</b></div>
            </li>
            <li>
              <div class="num green"><b>3</b></div>
            </li>
            <li>
              <div class="num green"><b>4</b></div>
            </li>
            <li class="open">
              <div class="wrap">
                <div class="num grey"><b>5</b></div>
                <p><span>SHIPPING</span><span>IN PROGRESS</span></p>
              </div>
            </li>
            <li class="closed">
              <div class="num"><b>6</b></div>
            </li>
            <li class="closed">
              <div class="num"><b>7</b></div>
            </li>
            <li class="closed">
              <div class="num"><b>8</b></div>
            </li>
            <li class="closed">
              <div class="num"><b>9</b></div>
            </li>
            <li class="closed">
              <div class="num last"><b>10</b></div>
            </li>

          </ol>
        </td>
        <td colspan="2" class="expanded">
          <ol class="steps">
            <li class="open">
              <div class="wrap">
                <div class="num green"><b>1</b></div>
                <p><span>ORDER</span><span>Done: 03/18/2019</span></p>
              </div>
            </li>
            <li class="open">
              <div class="wrap">
                <div class="num green"><b>2</b></div>
                <p><span>PACKING</span><span>Done: 03/18/2019</span></p>
              </div>
            </li>
            <li class="open">
              <div class="wrap">
                <div class="num green"><b>3</b></div>
                <p><span>CHECKING</span><span>Done: 03/18/2019</span></p>
              </div>
            </li>
            <li class="open">
              <div class="wrap">
                <div class="num green"><b>4</b></div>
                <p><span>RECHECKING</span><span>Done: 03/18/2019</span></p>
              </div>
            </li>
            <li class="open">
              <div class="wrap">
                <div class="num grey"><b>5</b></div>
                <p><span>SHIPPING</span><span>ONGOING</span></p>
              </div>
            </li>
            <li class="open">
              <div class="wrap">
                <div class="num black"><b>6</b></div>
                <p><span>COURIER</span><span>NOT YET DONE </span></p>
              </div>
            </li>
            <li class="open">
              <div class="wrap">
                <div class="num black"><b>7</b></div>
                <p><span>DELIVERY</span><span>NOT YET DONE </span></p>
              </div>

              <li class="open">
                <div class="wrap">
                  <div class="num black last"><b>10</b></div>
                  <p><span>CUSTOMER</span><span>NOT YET DONE </span></p>
                </div>
              </li>
          </ol>
          <hr>
          <div class="tableDiv">
            <div class="container">
              <div class="row">
                <div class="col-md-6">
                  <div class="tab" role="tabpanel">
                    <center>
                      <ul class="nav nav-tabs" role="tablist" style="width: 800px">
                        <li role="presentation" class="active"><a href="#Section1" aria-controls="build_details" role="tab" data-toggle="tab"><span><i class="fa fa-cog" style="font-size:35px; padding: 8px 9px 9px 11px;"></i></span> Order Details</a></li>
                        <li role="presentation"><a href="#Section2" aria-controls="logistics" role="tab" data-toggle="tab"><span><i class="fa fa-bar-chart" style="font-size:25px; padding: 12px 9px 9px 10px;"></i></span> Logistics</a></li>
                        <li role="presentation"><a href="#Section3" aria-controls="reports" role="tab" data-toggle="tab"><span><i class="fa fa-file-text" style="font-size:26px; padding: 14px 9px 9px 13px;"></i></span> Reports</a></li>
                        <li role="presentation"><a href="#Section4" aria-controls="shipments" role="tab" data-toggle="tab"><span><i class="fa fa-arrow-circle-right" style="font-size:34px; padding: 10px 9px 9px 11px;"></i></span> Shipments</a></li>
                      </ul>


                      <div class="tab-content tabs">
                        <div role="tabpanel" class="tab-pane fade in active" id="Section1">
                          <table border="2px">
                            <tr>
                              <th>ITEM</th>
                              <th>DETAILS</th>
                            </tr>
                            <tr>
                              <td>Bag</td>
                              <td>1pc; Green</td>
                            </tr>
                            <tr>
                              <td>Pouch</td>
                              <td>1pc; Blue</td>
                            </tr>
                            <tr>
                              <td>Necklace</td>
                              <td>1pc; Heart shape; Gold</td>
                            </tr>
                            <tr>
                              <td>Shoes</td>
                              <td>1 pair; Red; Size 6</td>
                            </tr>
                          </table><br>
                          <hr>
                        </div>


                        <div role="tabpanel" class="tab-pane fade" id="Section2">
                          <table border="2px">
                            <tr>
                              <th>CUSTOMER</th>
                              </th>
                              <th>DETAILS</th>
                            </tr>
                            <tr>
                              <td>NAME</td>
                              <td>John Smith</td>
                            </tr>
                            <tr>
                              <td>SHIPPING ADDRESS</td>
                              <td> 445 Mount Eden Road, Mount Eden, Auckland. Rural </td>
                            </tr>
                            <tr>
                              <td>TELEPHONE NUMBER</td>
                              <td>754-3010</td>
                            </tr>
                          </table>
                        </div>


                        <div role="tabpanel" class="tab-pane fade" id="Section3">
                          <center><a class="btn btn-danger" href="add_report.php">ADD REPORT</a><br><br>
                            <table id="Section3_table" name="Section3">
                              <tr>
                                <th>ISSUE</th>
                                <th>DETAILS</th>
                              </tr>
                              <tr>
                                <td></td>
                                <td></td>
                              </tr>
                          </center>
                          </table><br>
                          <hr>
                        </div>


                        <div role="tabpanel" class="tab-pane fade" id="Section4">
                          <table border="2px">
                            <tr>
                              <th>COURIER NAME</th>
                              <th>DATE SHIPPED</th>
                              <th>DATE ARRIVED</th>
                            </tr>
                            <tr>
                              <td></td>
                              <td></td>
                              <td></td>
                            </tr>
                          </table><br>
                          <hr>
                        </div>
                      </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <tr>
            <td valign="top"><span class="closedArrow"> 67890 </span></td>
            <td valign="top"><span class="closedArrow"> JANE </span></td>
            <td valign="top" class="collapsed">
              <ol class="steps">
                <li class="open">
                  <div class="wrap">
                    <div class="num grey"><b>1</b></div>
                    <p><span>PACKING</span><span>IN PROGRESS</span></p>
                  </div>
                </li>
                <li class="closed">
                  <div class="num"><b>2</b></div>
                </li>
                <li class="closed">
                  <div class="num"><b>3</b></div>
                </li>
                <li class="closed">
                  <div class="num"><b>4</b></div>
                </li>
                <li class="closed">
                  <div class="num"><b>5</b></div>
                </li>
                <li class="closed">
                  <div class="num"><b>6</b></div>
                </li>
                <li class="closed">
                  <div class="num"><b>7</b></div>
                </li>
                <li class="closed">
                  <div class="num"><b>8</b></div>
                </li>
                <li class="closed">
                  <div class="num"><b>9</b></div>
                </li>
                <li class="closed">
                  <div class="num last"><b>10</b></div>
                </li>

              </ol>
            </td>
            <td colspan="2" class="expanded">
              <ol class="steps">
                <li class="open">
                  <div class="wrap">
                    <div class="num green"><b>1</b></div>
                    <p><span>ORDER</span><span>ONGOING</span></p>
                  </div>
                </li>
                <li class="open">
                  <div class="wrap">
                    <div class="num black"><b>2</b></div>
                    <p><span>PACKING</span><span>NOT YET DONE</span></p>
                  </div>
                </li>
                <li class="open">
                  <div class="wrap">
                    <div class="num black"><b>3</b></div>
                    <p><span>CHECKING</span><span>NOT YET DONE</span></p>
                  </div>
                </li>
                <li class="open">
                  <div class="wrap">
                    <div class="num black"><b>4</b></div>
                    <p><span>RECHECKING</span><span>NOT YET DONE</span></p>
                  </div>
                </li>
                <li class="open">
                  <div class="wrap">
                    <div class="num black"><b>5</b></div>
                    <p><span>SHIPPING</span><span>NOT YET DONE</span></p>
                  </div>
                </li>
                <li class="open">
                  <div class="wrap">
                    <div class="num black"><b>6</b></div>
                    <p><span>COURIER</span><span>NOT YET DONE</span></p>
                  </div>
                </li>
                <li class="open">
                  <div class="wrap">
                    <div class="num black"><b>7</b></div>
                    <p><span>DELIVERY</span><span>NOT YET DONE</span></p>
                  </div>

                  <li class="open">
                    <div class="wrap">
                      <div class="num black last"><b>10</b></div>
                      <p><span>CUSTOMER</span><span>NOT YET DONE</span></p>
                    </div>
                  </li>
              </ol>
              <hr>


              <div class="tableDiv">

                <div class="container">
                  <div class="row">
                    <div class="col-md-6">
                      <div class="tab" role="tabpanel">
                        <center>
                          <ul class="nav nav-tabs" role="tablist" style="width: 800px">
                            <li role="presentation" class="active"><a href="#Section5" aria-controls="build_details" role="tab" data-toggle="tab"><span><i class="fa fa-cog" style="font-size:35px; padding: 8px 9px 9px 11px;"></i></span> Order Details</a></li>
                            <li role="presentation"><a href="#Section6" aria-controls="logistics" role="tab" data-toggle="tab"><span><i class="fa fa-bar-chart" style="font-size:25px; padding: 12px 9px 9px 10px;"></i></span> Logistics</a></li>
                            <li role="presentation"><a href="#Section7" aria-controls="reports" role="tab" data-toggle="tab"><span><i class="fa fa-file-text" style="font-size:26px; padding: 14px 9px 9px 13px;"></i></span> Reports</a></li>
                            <li role="presentation"><a href="#Section8" aria-controls="shipments" role="tab" data-toggle="tab"><span><i class="fa fa-arrow-circle-right" style="font-size:34px; padding: 10px 9px 9px 11px;"></i></span> Shipments</a></li>
                          </ul>


                          <div class="tab-content tabs">
                            <div role="tabpanel" class="tab-pane fade in active" id="Section5">
                              <table border="2px">
                                <tr>
                                  <th>ITEM</th>
                                  <th>DETAILS</th>
                                </tr>
                                <tr>
                                  <td>Dress</td>
                                  <td>1pc; Yellow</td>
                                </tr>
                                <tr>
                                  <td>Hat</td>
                                  <td>1pc; Green</td>
                                </tr>
                              </table><br>
                              <hr>
                            </div>


                            <div role="tabpanel" class="tab-pane fade" id="Section6">
                              <table border="2px">
                                <tr>
                                  <th>CUSTOMER</th>
                                  </th>
                                  <th>DETAILS</th>
                                </tr>
                                <tr>
                                  <td>NAME</td>
                                  <td>Jane Doe</td>
                                </tr>
                                <tr>
                                  <td>SHIPPING ADDRESS</td>
                                  <td>21 Greens Road RD 2 Ruawai 0592. Partial addresses: Main Highway </td>
                                </tr>
                                <tr>
                                  <td>TELEPHONE NUMBER</td>
                                  <td>1-541-754-3010</td>
                                </tr>
                              </table>
                            </div>


                            <div role="tabpanel" class="tab-pane fade" id="Section7">
                              <center><a class="btn btn-danger" href="add_report.php">ADD REPORT</a><br><br>
                                <table id="Section3_table" name="Section3">
                                  <tr>
                                    <th>ISSUE</th>
                                    <th>DETAILS</th>
                                  </tr>
                                  <tr>
                                    <td></td>
                                    <td></td>
                                  </tr>
                              </center>
                              </table><br>
                              <hr>
                            </div>


                            <div role="tabpanel" class="tab-pane fade" id="Section8">
                              <table border="2px">
                                <tr>
                                  <th>COURIER NAME</th>
                                  <th>DATE SHIPPED</th>
                                  <th>DATE ARRIVED</th>
                                </tr>
                                <tr>
                                  <td></td>
                                  <td></td>
                                  <td></td>
                                </tr>
                              </table><br>
                              <hr>
                            </div>
                          </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </td>
          </tr>
    </table>
</body>

</html>

0
ответ дан Zakaria Acharki 29 March 2019 в 08:52
поделиться
Другие вопросы по тегам:

Похожие вопросы: