Question

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

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

Answer 1

看看this fiddle。这很简单。我刚刚添加了一个selectedRow obsevable和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();
}

[...]

<强> See fiddle

通过Knockout JS获得价值并加入div

1 个答案: