Автоинкремент правильного форматированного серийного номера

Question

Я добавляю серийный номер с автоинкрементом, используя CSS Проблема, с которой я здесь сталкиваюсь, заключается в том, что она работает нормально, но строки не создаются, т. Е. Ее дизайн не создается. Может кто-нибудь сказать мне, что я делаю не так, также я хочу показать 1..2..3, но он печатает меня 11..22..33? Я новичок в этих технологиях.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<div class="table-responsive">
  <table class="table">
    <thead>
    <tr>
      <th rowspan="3" style="text-align: center;border:1px solid #e3ebf3;">Objective No.</th>
      <th rowspan="3" style="text-align: center;border:1px solid #e3ebf3;">My Performance Objective</th>
      <th rowspan="3" style="text-align: center; border:1px solid #e3ebf3;">Weightage<br>100%</th>
      <th colspan="5" style="text-align: center; border:1px solid #e3ebf3;">Standards of Performance</th>
      <th rowspan="3" style="text-align: center; border:1px solid #e3ebf3;">Outcome</th>
      <th rowspan="3" style="text-align: center; border:1px solid #e3ebf3;">Score</th>
    </tr>
    <tr colspan="5">
      <th style="text-align: center; border:1px solid #e3ebf3;">1</th>
      <th style="text-align: center; border:1px solid #e3ebf3;">2</th>
      <th style="text-align: center; border:1px solid #e3ebf3;">3</th>
      <th style="text-align: center; border:1px solid #e3ebf3;">4</th>
      <th style="text-align: center; border:1px solid #e3ebf3;">5</th>
    </tr>
    <tr colspan="5">
      <th style="text-align: center; border:1px solid #e3ebf3;">Unsatisfactory</th>
      <th style="text-align: center; border:1px solid #e3ebf3;">Partially <br>Meets<br> Objectives</th>
      <th style="text-align: center; border:1px solid #e3ebf3;">Fully<br> Meets<br> Objectives</th>
      <th style="text-align: center; border:1px solid #e3ebf3;">Exceeds <br> Objectives</th>
      <th style="text-align: center; border:1px solid #e3ebf3;">Far <br>Exceeds<br> Objectives</th>
    </tr>

    </thead>
    <tbody>

    <tr>
      <td style="text-align: center;border:1px solid #e3ebf3;">1</td>
      <td style="text-align: center;border:1px solid #e3ebf3;"><input type="text" class="form-control"></td>
      <td style="text-align: center;border:1px solid #e3ebf3;"><input type="text" class="form-control"></td>
      <td style="text-align: center;border:1px solid #e3ebf3;"><input type="text" class="form-control"></td>
      <td style="text-align: center;border:1px solid #e3ebf3;"><input type="text" class="form-control"></td>
      <td style="text-align: center;border:1px solid #e3ebf3;"><input type="text" class="form-control"></td>
      <td style="text-align: center;border:1px solid #e3ebf3;"><input type="text" class="form-control"></td>
      <td style="text-align: center;border:1px solid #e3ebf3;"><input type="text" class="form-control"></td>
      <td style="text-align: center;border:1px solid #e3ebf3;"><input type="text" class="form-control"></td>
      <td style="text-align: center;border:1px solid #e3ebf3;"><input type="text" class="form-control"></td>

    </tr>
    <tr>
      <td style="text-align: center;border:1px solid #e3ebf3;">2</td>
      <td style="text-align: center;border:1px solid #e3ebf3;"><input type="text" class="form-control"></td>
      <td style="text-align: center;border:1px solid #e3ebf3;"><input type="text" class="form-control"></td>
      <td style="text-align: center;border:1px solid #e3ebf3;"><input type="text" class="form-control"></td>
      <td style="text-align: center;border:1px solid #e3ebf3;"><input type="text" class="form-control"></td>
      <td style="text-align: center;border:1px solid #e3ebf3;"><input type="text" class="form-control"></td>
      <td style="text-align: center;border:1px solid #e3ebf3;"><input type="text" class="form-control"></td>
      <td style="text-align: center;border:1px solid #e3ebf3;"><input type="text" class="form-control"></td>
      <td style="text-align: center;border:1px solid #e3ebf3;"><input type="text" class="form-control"></td>
      <td style="text-align: center;border:1px solid #e3ebf3;"><input type="text" class="form-control"></td>
    </tr>
    <tr>
      <td style="text-align: center;border:1px solid #e3ebf3;">3</td>
      <td style="text-align: center;border:1px solid #e3ebf3;"><input type="text" class="form-control"></td>
      <td style="text-align: center;border:1px solid #e3ebf3;"><input type="text" class="form-control"></td>
      <td style="text-align: center;border:1px solid #e3ebf3;"><input type="text" class="form-control"></td>
      <td style="text-align: center;border:1px solid #e3ebf3;"><input type="text" class="form-control"></td>
      <td style="text-align: center;border:1px solid #e3ebf3;"><input type="text" class="form-control"></td>
      <td style="text-align: center;border:1px solid #e3ebf3;"><input type="text" class="form-control"></td>
      <td style="text-align: center;border:1px solid #e3ebf3;"><input type="text" class="form-control"></td>
      <td style="text-align: center;border:1px solid #e3ebf3;"><input type="text" class="form-control"></td>
      <td style="text-align: center;border:1px solid #e3ebf3;"><input type="text" class="form-control"></td>
    </tr>
    </tbody>
  </table>

</div>
<div>
  <button type="button" class="btn btn-success" value="Add Row" id="newobj">Add Objective</button>
  <button type="button" class="remove" value="Delete Row">Delete Objective</button>
  <button type="button" class="btn btn-success">Submit</button>
</div>
CSS:
body
{
  counter - reset: Count - Value;
    }
    table
    {
      border-collapse: separate;
    }
    tr td:first - child:before
    {
      counter-increment: Count - Value;
    content: "" counter(Count - Value);
    }

    jquery:
    $(document).add(function()
    {
      $("#newobj").click(function(){
    var addcontrol = "<tr>"
    addcontrol+ = "<td></td>"
    addcontrol+ = "<td><input type='text' ></td>"
    addcontrol+ = "<td><input type='text' ></td>"
    addcontrol+ = "<td><input type='text' ></td>"
    addcontrol+ = "<td><input type='text' ></td>"
    addcontrol+ = "<td><input type='text' ></td>"
    addcontrol+ = "<td><input type='text' ></td>"
    addcontrol+ = "<td><input type='text' ></td>"
    addcontrol+ = "<td><input type='text' ></td>"
    addcontrol+ = "<td><input type='text' ></td>"
    addcontrol+ = "</tr>"
    $("table tbody").append(addcontrol);
    });
  //alert("Cannot add more than 8 objectives");
   $(document).on('click', '.remove', function() {
  $(this).parents('tr').remove();

  });
  });

Answer 1

Пожалуйста, проверьте ниже код, он работает нормально.

1. Ваш результат печати 11..22..33, потому что вы уже упомянули stati c числа в поле разметки td, а также вы увеличенное число до CSS Так что в этом случае вам нужно удалить номера stati c из разметки для получения точных результатов.

2. Для Design-build вы просто добавляете inline CSS в первой разметке td в вашем файле jquery.

$(document).add(function()
{
 $("#newobj").click(function(){
      var addcontrol="<tr>"
      addcontrol+="<td style='text-align: center;border:1px solid #e3ebf3;'></td>"
           addcontrol+="<td><input type='text' ></td>"
           addcontrol+="<td><input type='text' ></td>"
           addcontrol+="<td><input type='text' ></td>"
           addcontrol+="<td><input type='text' ></td>"
           addcontrol+="<td><input type='text' ></td>"
           addcontrol+="<td><input type='text' ></td>"
           addcontrol+="<td><input type='text' ></td>"
           addcontrol+="<td><input type='text' ></td>"
           addcontrol+="<td><input type='text' ></td>"
           addcontrol+="</tr>"
   $("table tbody").append(addcontrol);
                   });
  //alert("Cannot add more than 8 objectives");
   $(document).on('click', '.remove', function() {
        $(this).parents('tr').remove();

});
});

body
{
    counter-reset: Count-Value;     
}
table
{
    border-collapse: separate;
}
tr td:first-child:before
{
  counter-increment: Count-Value;   
  content: "" counter(Count-Value);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<div class="table-responsive">
                    <table class="table">
                      <thead>
                        <tr>
                          <th rowspan="3" style="text-align: center;border:1px solid #e3ebf3;">Objective No.</th>
                          <th rowspan="3" style="text-align: center;border:1px solid #e3ebf3;">My Performance Objective</th>
                          <th rowspan="3" style="text-align: center; border:1px solid #e3ebf3;">Weightage<br>100%</th>
                          <th colspan="5" style="text-align: center; border:1px solid #e3ebf3;">Standards of Performance</th>
                          <th rowspan="3" style="text-align: center; border:1px solid #e3ebf3;">Outcome</th>
                          <th rowspan="3" style="text-align: center; border:1px solid #e3ebf3;">Score</th>
                        </tr>
                         <tr colspan="5">
                            <th style="text-align: center; border:1px solid #e3ebf3;">1</th>
                            <th style="text-align: center; border:1px solid #e3ebf3;">2</th>
                            <th style="text-align: center; border:1px solid #e3ebf3;">3</th>
                            <th style="text-align: center; border:1px solid #e3ebf3;">4</th>
                            <th style="text-align: center; border:1px solid #e3ebf3;">5</th>
                        </tr>
                        <tr colspan="5">
                            <th style="text-align: center; border:1px solid #e3ebf3;">Unsatisfactory</th>
                            <th style="text-align: center; border:1px solid #e3ebf3;">Partially <br>Meets<br> Objectives</th>
                            <th style="text-align: center; border:1px solid #e3ebf3;">Fully<br> Meets<br> Objectives</th>
                            <th style="text-align: center; border:1px solid #e3ebf3;">Exceeds <br> Objectives</th>
                            <th style="text-align: center; border:1px solid #e3ebf3;">Far <br>Exceeds<br> Objectives</th>
                        </tr>

                      </thead>
                      <tbody>

                        <tr>
                          <td style="text-align: center;border:1px solid #e3ebf3;"></td>
                          <td style="text-align: center;border:1px solid #e3ebf3;"><input type="text"  class="form-control"></td>
                          <td style="text-align: center;border:1px solid #e3ebf3;"><input type="text"  class="form-control"></td>
                          <td style="text-align: center;border:1px solid #e3ebf3;"><input type="text"  class="form-control"></td>
                          <td style="text-align: center;border:1px solid #e3ebf3;"><input type="text"  class="form-control"></td>
                          <td style="text-align: center;border:1px solid #e3ebf3;"><input type="text"  class="form-control"></td>
                          <td style="text-align: center;border:1px solid #e3ebf3;"><input type="text"  class="form-control"></td>
                          <td style="text-align: center;border:1px solid #e3ebf3;"><input type="text"  class="form-control"></td>
                          <td style="text-align: center;border:1px solid #e3ebf3;"><input type="text"  class="form-control"></td>
                          <td style="text-align: center;border:1px solid #e3ebf3;"><input type="text"  class="form-control"></td>

                        </tr>
                        <tr>
                          <td style="text-align: center;border:1px solid #e3ebf3;"></td>
                          <td style="text-align: center;border:1px solid #e3ebf3;"><input type="text"  class="form-control"></td>
                          <td style="text-align: center;border:1px solid #e3ebf3;"><input type="text"  class="form-control"></td>
                          <td style="text-align: center;border:1px solid #e3ebf3;"><input type="text"  class="form-control"></td>
                          <td style="text-align: center;border:1px solid #e3ebf3;"><input type="text"  class="form-control"></td>
                          <td style="text-align: center;border:1px solid #e3ebf3;"><input type="text"  class="form-control"></td>
                          <td style="text-align: center;border:1px solid #e3ebf3;"><input type="text"  class="form-control"></td>
                          <td style="text-align: center;border:1px solid #e3ebf3;"><input type="text"  class="form-control"></td>
                          <td style="text-align: center;border:1px solid #e3ebf3;"><input type="text"  class="form-control"></td>
                          <td style="text-align: center;border:1px solid #e3ebf3;"><input type="text"  class="form-control"></td>
                        </tr>
                        <tr>
                          <td style="text-align: center;border:1px solid #e3ebf3;"></td>
                          <td style="text-align: center;border:1px solid #e3ebf3;"><input type="text"  class="form-control"></td>
                          <td style="text-align: center;border:1px solid #e3ebf3;"><input type="text"  class="form-control"></td>
                          <td style="text-align: center;border:1px solid #e3ebf3;"><input type="text"  class="form-control"></td>
                          <td style="text-align: center;border:1px solid #e3ebf3;"><input type="text"  class="form-control"></td>
                          <td style="text-align: center;border:1px solid #e3ebf3;"><input type="text"  class="form-control"></td>
                          <td style="text-align: center;border:1px solid #e3ebf3;"><input type="text"  class="form-control"></td>
                          <td style="text-align: center;border:1px solid #e3ebf3;"><input type="text"  class="form-control"></td>
                          <td style="text-align: center;border:1px solid #e3ebf3;"><input type="text"  class="form-control"></td>
                          <td style="text-align: center;border:1px solid #e3ebf3;"><input type="text"  class="form-control"></td>
                        </tr>
                      </tbody>
                    </table>

                  </div>
                  <div>
<button type="button" class="btn btn-success" value="Add Row" id="newobj">Add Objective</button>
<button type="button" class="remove" value="Delete Row" >Delete Objective</button>
<button type="button" class="btn btn-success">Submit</button>
                  </div>