Question

我是初学者，所以我不确定这里有什么问题。我试图实现的是检查表（列）中的某些单元格是否具有数值，以及它们是否包含它们在失去焦点（模糊）时计算平均值，以便它可以是实时的。

我不确定计算功能本身是否错误，或者我是否正在寻找错误的列或尝试以错误的方式插入计算值。帮助将不胜感激。

这是JSfiddle和代码摘录： https://jsfiddle.net/NulisDefo/03rn7ew1/5/

表

<table id="myTable" class="table table-inverse">
    <thead id = "headings" class = "thead-default">
      <tr>
        <th>Tabelio Nr.</th>
        <th>Vardas</th>
        <th>Pavardė</th>
        <th>Pareigos</th>
        <th>Bazinė alga, €</th>
        <th>Valandinis atlyginimas, €</th>
        <th>Veiksmai</th>
      </tr>
    </thead>
    <tfoot class = "thead-default">
      <tr>
        <td colspan = "4">Vidurkis</td>
        <!-- <td></td>
        <td></td>
        <td></td> -->
        <td id = "alga">0</td>
        <td id = "valandinis" colspan = "2">0</td>
        <!-- <td></td> -->
      </tr>
    </tfoot>
    <tbody>
      <tr>
        <td>1</td>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
        <td>1000</td>
        <td><input type="button" value="Delete" onclick="deleteRow(this)"></td>
        <td>
          <p class = "btn editbtn"><span class = "fa fa-edit"></span></p>
          <p class = "btn" onclick="deleteRow(this)"><span class = "fa fa-trash"></span></p>
        </td>
      </tr>
      <tr>
        <td>2</td>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
        <td>2000</td>
        <td>blum</td>
        <td>
          <p class = "btn editbtn"><span class = "fa fa-edit"></span></p>
          <p class = "btn" onclick="deleteRow(this)"><span class = "fa fa-trash"></span></p>
        </td>
      </tr>
      <tr class = "testas">
        <td>3</td>
        <td>Larry</td>
        <td>the Bird</td>
        <td>@twitter</td>
        <td>5000</td>
        <td>blum</td>
        <td>
          <p class = "btn editbtn"><span class = "fa fa-edit"></span></p>
          <p class = "btn" onclick="deleteRow(this)"><span class = "fa fa-trash"></span></p>
        </td>
      </tr>
    </tbody>
  </table>

用于计算和触发的脚本

$("table").on("blur", "td", function(){
calculate();
} );

function calculate() {
  var sum = 0;
  var counter = 0 //daliklis
  $('#myTable tbody tr td:nth-child(5)').each(function() {
  // $("table tbody tr td:eq(4)").each(function(){
    if (!isNaN(this.value))
    {
      sum += parseFloat($(this).text());
      counter += 1;
    }
    });
    $("#alga").textContent(sum/counter);
};

我应该提一下，只有在按下编辑按钮后才能编辑先前现有的条目。

编辑：好的，显然所有解决方案都有效，但问题是，如果单元格为空，而不是从计算中排除该部分，则返回的结果为NaN

Answer 1

function deleteRow(r) {
    var i = r.parentNode.parentNode.rowIndex;
    document.getElementById("myTable").deleteRow(i);
    };


$("#pridet").on("click", function() {
  $("<tr contenteditable><td></td><td></td><td></td><td></td><td></td><td></td></tr>").prependTo("table tbody");
  $("table tbody tr td").last().clone().appendTo("table tbody tr:first");
});


$(".editbtn").click(function () {
          var currentTD = $(this).parents("tr").find("td");

              $.each(currentTD, function () {
                  $(this).prop("contenteditable", true)
              });
      });


$("table").on("blur", "td", function(){
  calculate();
} );


function calculate() {
  var sum = 0;
  var counter = 0 //daliklis
  $('#myTable tbody tr td:nth-child(5)').each(function() {
  // $("table tbody tr td:eq(4)").each(function(){
    if (!isNaN($(this).text()))
    {
      sum += parseFloat($(this).text());
      counter += 1;
    }
    });
    $("#alga").text(sum/counter);
}
calculate();

.btn {
  width:10%;
  padding-bottom:0;
  margin-bottom:0;
  border-bottom:0
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
    <div class="container">
      <button id = "pridet">add</button>
      <table id="myTable" class="table table-inverse">
        <thead id = "headings" class = "thead-default">
          <tr>
            <th>Tabelio Nr.</th>
            <th>Vardas</th>
            <th>Pavardė</th>
            <th>Pareigos</th>
            <th>Bazinė alga, €</th>
            <th>Valandinis atlyginimas, €</th>
            <th>Veiksmai</th>
          </tr>
        </thead>
        <tfoot class = "thead-default">
          <tr>
            <td colspan = "4">Average</td>
            <!-- <td></td>
            <td></td>
            <td></td> -->
            <td id = "alga">0</td>
            <td id = "valandinis" colspan = "2">0</td>
            <!-- <td></td> -->
          </tr>
        </tfoot>
        <tbody>
          <tr>
            <td>1</td>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
            <td>1000</td>
            <td>15.3</td>
            <td>
              <p class = "btn editbtn"><span class = "fa fa-edit"></span></p>
              <p class = "btn" onclick="deleteRow(this)"><span class = "fa fa-trash"></span></p>
            </td>
          </tr>
          <tr>
            <td>2</td>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
            <td>2000</td>
            <td>16.8</td>
            <td>
              <p class = "btn editbtn"><span class = "fa fa-edit"></span></p>
              <p class = "btn" onclick="deleteRow(this)"><span class = "fa fa-trash"></span></p>
            </td>
          </tr>
          <tr class = "testas">
            <td>3</td>
            <td>Larry</td>
            <td>the Bird</td>
            <td>@twitter</td>
            <td>5000</td>
            <td>10.2</td>
            <td>
              <p class = "btn editbtn"><span class = "fa fa-edit"></span></p>
              <p class = "btn" onclick="deleteRow(this)"><span class = "fa fa-trash"></span></p>
            </td>
          </tr>
        </tbody>
      </table>
      </div>
      </body>

$("#alga").text(sum/counter);代替$("#alga").textContent(sum/counter);

textContent不是一个功能。请改用$ .fn.text。

另外，您使用this.value。哪个应为$(this).text()，您最初应该调用calculate()函数：

Answer 2

您可以使用focusout事件。

$("table").on("focusout", "tr", function(){ 
 calculate();
});

我更新了以下代码。

将focusout的事件更改为tr。（因为此事件会侦听对contenteditable所做的更改，在您的情况下，tr有contenteditable而不是td。
在中添加了课程avg 页脚td将告诉这些列需要平均值计算
在计算中考虑了avg类，并且稍微更新了逻辑。
使用jquery的text()方法设置并获取td的文字。

检查更新的fiddle

Answer 3

你的循环不合适。查看jsFiddle Demo。现在您只需要决定何时触发计算功能，我认为您可以处理

 function calculate() {
      var sum = 0;
      var counter = 0 //daliklis
      $('#myTable tbody tr').each(function() {
      // $("table tbody tr td:eq(4)").each(function(){
        var a = $(this).children('td:nth-child(5)');
        if (!isNaN(a.text()))
        {
          sum += parseFloat(a.html()); console.log(sum);
          counter += 1;
        }
        });
        $("#alga").text(sum/counter);
    }

jsFiddle Demo

如何获得表

3 个答案: