2012-04-29 25 views
0

私は単純なHTMLテーブルを持っています。私は、ユーザーが既存のセルから別のセルに値をコピーすることを可能にするボタンを持っていたいと思います。ユーザーがそれを「最近のアクティビティからコピー」のリンクへをクリックするとテーブルのセル値を別のセルにコピーする - jQuery

http://jsfiddle.net/XF9BD/1/ :3を行ごとに1/3列から値をコピーするにはボタンをクリック/コラムここ3

は、単純なHTMLテーブルですセルから3列上の値を同じ列にコピーします。

+1

クローン? – Philip

答えて

1

私が正しく理解したら、最も簡単なアプローチは、クローンを選択した<tr>を表に挿入し、クローンを変更することだと考えてください。

HTML:

<table id="scores" width="358" border="1"> 
    <tbody id="recentActivities"> 
    <tr> 
    <td width="104">Recent Activity</td> 
    <td width="69">Result</td> 
    <td width="163"></td> 
    </tr> 
    <tr> 
    <td class="title">Activity 1</td> 
    <td class="result">100</td> 
    <td class="action_status"><button class="copy">Copy</button></td> 
    </tr> 
    <tr> 
    <td class="title">Activity 2</td> 
    <td class="result">300</td> 
    <td class="action_status"><button class="copy">Copy</button></td> 
    </tr> 
    <tr> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
    </tr> 
    </tbody> 
    <tbody id="copiedActivities"></tbody> 
</table> 

JavaScriptを:いくつかのアイデアのための またはどの程度this

var $copiedActivities = $("#copiedActivities"); 
$("button.copy").on('click', function() { 
    var clone = $(this).closest("tr").clone(true).appendTo($copiedActivities); 
    var titleCell = clone.find(".title"); 
    titleCell.text('Projection' + titleCell.text()); 
    clone.find(".action_status").empty().text('Copy of Recent Activity'); 
}); 

update of your fiddle

編集を参照してください?

+0

ご意見ありがとうございます。前の行からコピーするためにボタンを押さずに値を直接入力する可能性があるので、コピー先の行が常に表示される必要があるため、クローニングの手法を使用することはできません。私は目的地のセルでこれを使ってしまいました: user982124

+0

これでわかりましたが、答えがわかりましたが、HTMLではなくJavaScriptでイベントハンドラを取り付ける方が良いです。また、ちょっと考えれば、より洗練された「アルゴリズム的」なソリューションを開発できるはずです。セルを個別のIDにする必要なしに、3行以上の値をフェッチするすべての "コピー..."ボタン用の単一のハンドラ。 –

0

私は、これはすべての回で見ることができ、必要であれば、ユーザーが手動で値を入力できるようにするために、必要に応じて私が先セルに次のように使用して終了:の値を新しいセルに選択

<td class="action"><button class="copy" onclick="$('#projectmodvalue').val($('#totalmod').val())" value="Set Value">Copy from Recent Activity</button></td> 
関連する問題