1

ドロップダウン リストまたはスライダーから選択した値に基づいて、テーブルに行を追加する方法を探しています。

これを非常に基本的なテーブルと見なします:

<html>
<head>
  <title></title>
</head>
<body>
<table border="1">
  <thead><tr>
    <th>Name</th>
    <th>A</th>
    <th>B</th>
    <th>C</th>
    <th>D</th>
    <th>E</th>
    <th>F</th>
  </tr>
  </thead><tbody>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td><input type="checkbox"></td>
    </tr>
  </tbody>
</table>
<br>
</body>
</html>

ユーザーが表示される行数を増減できるドロップダウンまたはスライダーを追加して、完了できるようにしたいと思います。その後、フォームが送信されると、すべての値が通常どおり送信されます。どうすればそれを行うことができますか？

また、最後の列のチェックボックスを使用して、ユーザーが最初の行の名前を除くすべての値を、チェックする任意の行に複製できるようにしたいと思います..それは可能ですか? 特に行 1 を更新すると、他の行は更新されますか?

感謝して受け取ったポインタまたはリンク:)

4

2 に答える 2

7

どうぞ。あなただけのカスタムコーディング

ライブデモ

$(function(){
    var $tbody = $("#tb1"),$firstRow=$("#tb1 tr").eq(0);
    $('#defaultSlider').change(function(){
        var val = this.value;
        $('#currentValue').html(val);
        $tbody.find("tr:gt("+val+")").remove();
        for (var i = $("#tb1 tr").length;i<val;i++) {
            $tbody.append('<tr><td></td><td></td><td></td><td></td><td></td><td></td><td><input type="checkbox" class="copy"/></td></tr>');
        }
    }).change(); // Trigger the event on load, so the table is populated:

    $firstRow.find("input[type=text]").each(function(i) {
        $(this).on("blur",function() { // or keyup if useful
          var val = $(this).val();  
          var idx = i;
          var $checked = $("#tb1 tr").find("input[type=checkbox]:checked");
          $checked.each(function(i) {
            if (i>0) {
              // we may want to keep existing input 
              // perhaps even uncheck row if inout changed, but for now overwrite
              $(this).closest("tr").find("input").eq(idx).val(val);
            }
          });
        });
    });
    $tbody.on("change","tr .copy",function() {
        if (this.checked) {
            var $newRow = $firstRow.clone(true);
            $newRow.find("td:first input").val("")
            $(this).closest("tr").replaceWith($newRow);
        } 
    });
});
于 2013-07-11T08:30:34.127 に答える
1

これを手動で行うのではなく、Knockout などを使用することをお勧めします。これの利点は、余分な id やクラスがなく、これにより問題が分離され、JavaScript に厄介なマークアップがなくなりました。また、モデルはテキストボックスからの値で更新されるため、モデル内の値を呼び出すだけで何かを取得できます。

上記を Knockout でフォークした例を次に示します。

http://jsfiddle.net/scottreeddev/pZhh7/

var my = {};
var lastValue = 1;

my.Row = function()
{
    var self = this;
    self.Name = ko.observable("");
    self.RowA = ko.observable("");
    self.RowB = ko.observable("");
    self.RowC = ko.observable("");
    self.RowD = ko.observable("");
    self.RowE = ko.observable("");
    self.RowF = ko.observable(false);
};

my.viewmodel = 
    {
        RowCollection: ko.observableArray([new my.Row()]),
        SliderValue: ko.observable(1)
    };

my.viewmodel.SliderValue.subscribe(function () {
    var sliderValue = parseInt(my.viewmodel.SliderValue());
    if(sliderValue > lastValue)
    {
        my.viewmodel.RowCollection.push(new my.Row());
    }
    else
    {
        my.viewmodel.RowCollection.pop();
    }
    lastValue = sliderValue;
}, my.viewmodel);

ko.applyBindings(my.viewmodel);
于 2013-07-11T21:59:53.847 に答える