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>

我想添加一个下拉菜单或滑块，允许用户增加或减少可见的行数并且他们可以完成。然后，当提交表单时，所有值都将正常提交。知道我该怎么做吗？

我还想在最后一列中使用复选框，以允许用户将除第一行中的名称之外的所有值复制到他们检查的任何行中。这可能吗？特别是如果他们更新第一行，其他人会更新吗？

感激地收到指针或链接:)

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、classes 并且这将关注点分开，现在 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 回答