Question

我正在寻找一种方法，根据从下拉列表或滑块中选择的值向表中添加其他行。

将此作为一个非常基本的表格：

<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>

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

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

感激地收到指针或链接：）

Answer 1

你走了。专为您自定义编码

Live Demo

$(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);
        } 
    });
});

Answer 2

而不是手动执行此操作，我建议使用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);

PHP / Jquery创建和操作表

2 个答案: