1

我有一个隐藏最后一列的 html 表。当我单击表格行时，我想获取此隐藏列值并将其放入 div 中。这是一个小提琴：

http://jsfiddle.net/tzD4T/390/

ko模型：

    function ViewModelTrazas(data) {
      var self = this;
      self.trazas = ko.observableArray();
      array = self.trazas;
    }

    function push(){
       array.push({
            Fecha: ko.observable('a'),
            Maquina: ko.observable('b'),
            TipoEvento: ko.observable('c'),
            Mensaje: ko.observable('d')
       });
     }

    ko.applyBindings(new ViewModelTrazas(), document.getElementById('divDataGrid'));
    push();

桌子：

<table id="datagrid" style="width: 100%;">
         <thead style="text-align:left">
             <tr>
                <th>Date</th>
                <th>Machine</th>
                <th>Event type</th>
                <th>Detail</th>
              </tr>
          </thead>
         <tbody data-bind="foreach: trazas">
             <tr>
                  <td data-bind=" text: Fecha"></td>
                  <td data-bind=" text: Maquina"></td>
                  <td data-bind=" text: TipoEvento"></td>
                  <td data-bind=" text: Mensaje"></td>
             </tr>
         </tbody>

我试过用 jquery 来做，但这个示例代码没有用：

$('datagrid tr').click(function(){
 var detail = $(this).val();
 // put the value into div
  ... 
}
4

1 回答 1

2

看看这个小提琴。这很简单。我刚刚添加了一个 selectedRow 可观察和 selectRow 事件处理程序。

风景 ：

<table style="width: 100%">
    <tr>
        <td>
            <div id="divDataGrid" style="margin-top:-4px;
                                    height: 200px; overflow:auto;">
                <table id="datagrid" style="width: 100%;">
                    <thead style="text-align:left">
                        <tr>
                            <th>Date</th>
                            <th>Machine</th>
                            <th>Event type</th>
                            <th>Detail</th>
                        </tr>
                    </thead>
                    <tbody data-bind="foreach: trazas">
                        <tr data-bind="click: $parent.selectRow">
                            <td data-bind=" text: Fecha"></td>
                            <td data-bind=" text: Maquina"></td>
                            <td data-bind=" text: TipoEvento"></td>
                            <td data-bind=" text: Mensaje"></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </td>
    </tr>
</table>
<br/>
<span>Detail:</span>
<br/>
<div data-bind="with: seletedRow">
    <div data-bind="text: Mensaje"></div>
</div>

JS：

var array;

function ViewModelTrazas(data) {
    var self = this;
    self.trazas = ko.observableArray();
    array = self.trazas;
    self.selectRow = function (row) {
        self.seletedRow(row);
    }
    self.seletedRow = ko.observable();
}

[...]

见小提琴

于 2013-07-08T11:14:59.100 回答