Javascript 删除动态网格，添加列和行

在.NETMVC显示html网格后，我试图在客户端向淘汰网格添加行和列

我可以找到一种动态添加行的方法，但无法让网格添加列和行。有人知道如何使用knockout动态添加行和列，然后将网格中的数据（包括新的行和列标题）保存到服务器上吗

<form action='/controller/save'>
<p>There are <span data-bind='text: series().length'>&nbsp;</span> series set</p>
<table data-bind='visible: series().length > 0'>
    <thead>
        <tr>
            <th>---</th>
            <!-- ko foreach: cols -->
            <th data-bind='text:title'></th>
            <!-- /ko -->
            <th><button> Add New Column</button></th>
        </tr>
    </thead>
    <tbody data-bind='foreach: series'>
        <tr>
            <td data-bind='text:name'></td>
            <!-- ko foreach: cols -->
            <td><input class='required'  /></td>
            <!-- /ko -->
            <td><a href='#' data-bind='click: $root.removeSeries'>Delete</a></td>
        </tr>
    </tbody>
</table>

<button data-bind='click: addNewSeries'>Add New Series</button>
<button data-bind='enable: series().length > 0' type='submit'>Save</button>

---

我创建了一个示例来显示您在那里犯了很多错误。你需要使用chrome\explorer\firefox工具来调试你的东西。不过我在工作中得到了它

     <form action='/controller/save'>
    <p>There are <span data-bind='text: series().length'>&nbsp;</span> series set</p>
    <div  data-bind='visible: series().length > 0'>
    <table>
        <thead>
            <tr data-bind="foreach: cols">

                <th data-bind='text:$data.title'></th>
            </tr>
            <button data-bind="click:addNewCol"> Add New Column</button>
        </thead>
        <tbody data-bind='foreach: series'>
            <tr>
                <td data-bind='text:name'></td>
    <!-- ko foreach :$root.cols -->
                <!-- ko if: $index() != 0 -->
                <td><input class='required'  /></td>
                <!-- /ko -->
                <!--/ko-->
                <td><a href='#' data-bind='click: $root.removeSeries'>Delete</a></td>
            </tr>
        </tbody>
        </table>
    </div>
    <button data-bind='click: addNewSeries'>Add New Series</button>
    <input type="text" data-bind="value: title"/>
    <button data-bind='enable: series().length > 0' type='submit'>Save</button>
</form>

---

感谢您抽出时间。我查看了您的fiddle解决方案，但我正在寻找一个具有动态行和动态列的网格。当我在您的解决方案上单击“添加新列”时，它只在单独的表中向数据添加一个新的表行标题列。当我单击“添加新系列”（用于行）时，什么都没有发生。感谢您的尝试这里有一个更接近的解决方案，但是尽管行是动态的，列是静态更新的。很抱歉，在我回复之前我没有检查，希望这足够接近你想要做的事情，因为我没有100%理解你到底需要什么

     <form action='/controller/save'>
    <p>There are <span data-bind='text: series().length'>&nbsp;</span> series set</p>
    <div  data-bind='visible: series().length > 0'>
    <table>
        <thead>
            <tr data-bind="foreach: cols">

                <th data-bind='text:$data.title'></th>
            </tr>
            <button data-bind="click:addNewCol"> Add New Column</button>
        </thead>
        <tbody data-bind='foreach: series'>
            <tr>
                <td data-bind='text:name'></td>
    <!-- ko foreach :$root.cols -->
                <!-- ko if: $index() != 0 -->
                <td><input class='required'  /></td>
                <!-- /ko -->
                <!--/ko-->
                <td><a href='#' data-bind='click: $root.removeSeries'>Delete</a></td>
            </tr>
        </tbody>
        </table>
    </div>
    <button data-bind='click: addNewSeries'>Add New Series</button>
    <input type="text" data-bind="value: title"/>
    <button data-bind='enable: series().length > 0' type='submit'>Save</button>
</form>

   $(document).ready(function(){
    var ItemModel = function (series) {
        var self = this;
        self.series = ko.observableArray(series);        

        self.addNewSeries = function () {
            self.series.push({
                name: self.title(),
                value: ""
            });
        };
        self.title=ko.observable();
        self.removeSeries = function () {
          //do something with series
            self.series.remove(this);
        };

        self.save = function (form) {
             ko.utils.postJson($("form")[0], self.items);
        };
        self.cols = ko.observableArray([{ title: "col1" },
        { title: "col2" }]);

        function Col (title) {
            this.title = ko.observable(title);
        };
            self.addNewCol = function () {
                self.cols.push(new Col('new'));
            };


        };


    var viewModel = new ItemModel([
        { name: "2012/13", value: "122345" },
        { name: "2013/14", value: "564543" }
    ]);
    ko.applyBindings(viewModel);


   /* var ColumnModel = function (cols) {

    };
    var columnModel = new ColumnModel([
        { title: "col1" },
        { title: "col2" }
    ]);
    ko.applyBindings(columnModel);
*/

    // Activate jQuery Validation
             //                $("form").validate({ submitHandler: viewModel.save });
});