1

イベント「変更」が呼び出された現在の行の特定の入力を更新するにはどうすればよいですか?

これが私のスクリプトです：

$('#absence-table').on('change', '.from input, .to input',function() {
    var from   = $('.from input').val();
    var to     = $('.to input').val();

    if (from != "" && to != "")
    {
        d1 = getTimeStamp(from);
        d2 = getTimeStamp(to);

        if(d1 <= d2)
        {
            $('.result input').val(new Number(Math.round(d2 - d1)+1));
        }

        else
        {
            $('.result input').val(0);
        }
    }
});

HTML:

<table class="table table-bordered" id="absence-table">
<tr>
    <th>Absence type</th>
    <th>From</th>
    <th>To</th>
    <th>Days requested</th>
    <th>Morning</th>
    <th>Afternoon</th>
    <th colspan="2">Comment</th>
</tr>
<tr class="main-abs-line">
    <td>
        <select name="absence-type" class="input-small">
            <option value="t1">type1</option>
            <option value="t2">type2</option>
        </select>
    </td>
    <td class="from"><input type="text" class="input-small" /></td>
    <td class="to"><input type="text" class="input-small" /></td>
    <td class="result"><div class="text-center"><input type="text" class="input-xsmall" /></div></td>
    <td class="morning"><div class="text-center"><input type="checkbox"></div></td>
    <td class="afternoon"><div class="text-center"><input type="checkbox"></div></td>
    <td colspan="2"><input type="text" /></td>
</tr>
// some tr added by the append() method

現在、最初の行の結果入力のみが更新され、現在の結果入力は最初からコピーされます。'.from input' と '.to input' の値が正しい (現在の行の値) ため、これは奇妙です。

通常は $(this) を使用して現在のオブジェクトを取得しますが、on() メソッドではそれを行う方法がわかりません。

4

3 に答える 3

2

event.targetイベントを関数に渡すことで使用できます

ライブデモ

function(event){
  alert(event.target.id);

あなたのコードは

$('#absence-table').on('change', '.from input, .to input',function(event) {
   alert(event.target.id);
   //your code
});
于 2013-07-18T13:38:41.857 に答える
2

tr（コメントごとに）イベントをトリガーした要素を囲む必要があるchange場合は、次を使用します。

var $tr = $(this).closest('tr');

イベント ハンドラー内では、this委任されたイベント ハンドラーを使用している場合でも、トリガー要素に対応します。

于 2013-07-18T13:59:09.730 に答える
2

これがあなたが探しているものだと思います：

$('#absence-table').on('change', '.from input, .to input',function() {
    $tr = $(this).closest("tr");
    var from   = $tr.find('.from input').val();
    var to     = $tr.find('.to input').val();

    if (from != "" && to != "")
    {
        d1 = getTimeStamp(from);
        d2 = getTimeStamp(to);

        if(d1 <= d2)
        {
            $tr.find('.result input').val(new Number(Math.round(d2 - d1)+1));
        }

        else
        {
            $tr.find('.result input').val(0);
        }
    }
});

これは、、 、 andをtr含むがいくつかあることを前提としています。.to.from.result.to.from.resulttr

于 2013-07-18T13:54:56.850 に答える