2

私は基本的に、曜日を含むテーブルを用意します (ヘッダー行全体)。列 1-日曜日、列 2-月曜日など。各セルには、勤務時間、つまり が入力され8ます。データが各セルに入力された後、各セルがその列の上にあるセルの合計を動的に計算する最後の行。理想的には、カーソルを別のセルに移動した後に計算する必要があります。

これにはJavaScriptを使用する必要があるようです。しかし、JavaScript をゼロから作成することはできません。それが書かれた後に必要なものにのみ微調整することができます。

私たちの目的のために、ここに基本的なテーブルがあります。列 1に例を示します。

<table id="workweek" class="wwtable">
<tr><th>sunday</th><th>monday</th><th>tuesday</th><th>wednesday</th><th>thursday</th><th>friday</th><th>saturday</th></tr>
<tr><td>8 </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr>
<tr><td>8 </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr>
<tr><td>8 </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr>
<tr><td>8 </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr>
<tr><td>8 </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr>
<tr><td>(Calculate 40 here) </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr>
</table>

言及するのを忘れました。各セルには、ユーザーが毎日の時間を入力するため、各セルに入力フィールドがあります。

4

2 に答える 2

4

jQuery が実行可能なオプションである場合は、次tdのように特定の列のすべてを反復処理できます。

$('#workweek>tbody>tr>td:nth-child(1)').each( function(){
    sum += parseInt($(this).text()) || 0;
});

私はjsFiddleであなたのために実用的な例をまとめました:

for (var i=1; i<8; i++)
{
    var sum = 0;

    // iteration through all td's in the column
    $('#workweek>tbody>tr>td:nth-child(' + i + ')').each( function(){
        sum += parseInt($(this).text()) || 0;
    });

    // set total in last cell of the column
    $('#workweek>tbody>tr>td:nth-child(' + i + ')').last().html(sum);
}

この例では、列の最後のセルが空でない場合、その内容が消去されることに注意してください。

于 2013-03-12T22:38:35.923 に答える
2

テーブルの DOM をループして、各セルのtextContentorを時間単位の値として取得できます。innerText

これは一般的な方法です。

function strip(html) {
    var tmp = document.createElement("DIV");
    tmp.innerHTML = html;
    return tmp.textContent||tmp.innerText;
}

次に（このようなもの）：作業例：http://jsfiddle.net/7srJf/3/

var tbl = document.getElementById('my-table');
var rows = tbl.rows;
var DAYS_OF_WEEK = 2, totals = [0, 0];
for (var i = 0; i < DAYS_OF_WEEK; i++) { 
    for (var j = 1; j < rows.length; j++) {
      var cell = rows[j].cells[i];
      var numHours = parseInt(strip(cell.innerHTML), 10);
      totals[i] += numHours;
    }
}
于 2013-03-12T22:32:09.033 に答える