Javascript 自动递增正确格式化的序列号

我正在使用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();

  });
  });

目标号。
我的业绩目标
重量
100%
业绩标准
结果
分数
1.
2.
3.
4.
5.
不尽人意
部分
符合
目标
完全满足
目标
超过
目标
远远超过目标
1.
2.
3.
添加目标
删除目标
提交
CSS:
身体
{
计数器复位：计数值；
}
桌子
{
边界塌陷：分离；
}
tr td：第一个孩子：之前
{
计数器增量：计数值；
内容：“计数器（计数值）；
}
jquery：
$（文档）.add（函数（）
{
$（“#newobj”）。单击（函数（）{
var addcontrol=“”
addcontrol+=“”
addcontrol+=“”
addcontrol+=“”
addcontrol+=“”
addcontrol+=“”
addcontrol+=“”
addcontrol+=“”
addcontrol+=“”
addcontrol+=“”
addcontrol+=“”
addcontrol+=“”
$（“表tbody”）.append（addcontrol）；
});
//警报（“不能添加超过8个目标”）；
$（文档）。在（'单击'，'删除'，函数（）上）{
$（this.parents（'tr'）.remove（）；
});
});

请检查下面的代码，它的工作正常

您的打印结果11..22..33，因为您已经在标记td字段中提到了静态数字，并且您的数字通过CSS递增，因此在这种情况下，您需要从标记中删除静态数字以获得准确的结果

对于设计-构建，只需在自定义jquery文件的第一个td标记中添加内联CSS

$（文档）.add（函数（）
{
$（“#newobj”）。单击（函数（）{
var addcontrol=“”
addcontrol+=“”
addcontrol+=“”
addcontrol+=“”
addcontrol+=“”
addcontrol+=“”
addcontrol+=“”
addcontrol+=“”
addcontrol+=“”
addcontrol+=“”
addcontrol+=“”
addcontrol+=“”
$（“表tbody”）.append（addcontrol）；
});
//警报（“不能添加超过8个目标”）；
$（文档）。在（'单击'，'删除'，函数（）上）{
$（this.parents（'tr'）.remove（）；
});
});
正文
{
计数器复位：计数值；
}
桌子
{
边界塌陷：分离；
}
tr td：第一个孩子：之前
{
计数器增量：计数值；
内容：“计数器（计数值）；
}

目标号。
我的业绩目标
重量
100%
业绩标准
结果
分数
1.
2.
3.
4.
5.
不尽人意
部分
符合
目标
完全满足
目标
超过
目标
远远超过目标
添加目标
删除目标
提交
非常感谢，非常有帮助