如何獲得表中某些列值的平均值

我是初學者，所以我不知道這裏有什麼錯。我試圖達到的目的是檢查表（列）中的某些單元格是否具有數值，以及它們是否包含在計算失去焦點時的平均值（模糊），以便它們具有實時性。如何獲得表中某些列值的平均值

我不確定計算函數本身是否錯誤，或者如果我正在尋址錯誤的列，或者嘗試以錯誤的方式插入計算的值。幫助將不勝感激。

這裏的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

來源

2017-06-07 NulisDefo

像這樣的事情？ https://jsfiddle.net/03rn7ew1/7/，也許事件這作爲一個更新的版本https://jsfiddle.net/15w9t8tg/ –

td沒有價值屬性，檢查文字 – inarilo

@CarstenLøvboAndersen第一個小提琴顯示一些奇怪的行爲對我來說。第二個似乎很好。儘管生病不得不查找代碼的意思是什麼 – NulisDefo

您可以使用focusout事件。

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

我更新了下面的代碼。

更改事件爲focusout爲tr。（因爲這個事件監聽contenteditable和你的情況tr做出變化contenteditable不是td。
添加的類avg在頁腳TD這將告訴這些列需要平均計算。
考慮avg類在計算和還更新了邏輯位。
使用jQuery的text()方法來設置和獲取的td文本。

支票更新fiddle

來源

2017-06-07 11:05:00

這裏的「調試器」語句是什麼？ – NulisDefo

也，我真的沒有得到你對循環的意思。爲什麼循環遍歷計算中包含的特定單元格是錯誤的？ – NulisDefo

@NulisDefo'debugger'你可以刪除，它被添加到調試代碼。如果要以通用方式顯示每列的總和，則需要循環。如果你只需要兩列，那麼你現在的代碼是可以的。 –

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()函數一次：

來源

2017-06-07 10:58:17 phil

查看更新後的代碼片段 – phil

您的環路不正確。結帳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

來源

2017-06-07 11:16:53

什麼是選擇器「a」，甚至不是qoutes？ – NulisDefo

@NulisDefo ** a **是一個變量，包含所需的td元素。 'var a = $（this）.children（'td：nth-child（5）'）;' –

如何獲得表中某些列值的平均值

回答

相關問題