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

[...]

フィドルを見る

于 2013-07-08T11:14:59.100 に答える