Question

How do I get the value of an object when I click on it from a list?

HTML Here:

<table class="ui table">

        <thead>
        <th class="header small">Operator:</th>
        <th>Employee ID:</th>
        <th>Category:</th>
        <th>Number:</th>
        <th>Team Group</th>
        <th>Delete</th>
        <th>Edit</th>
        </thead>
    <tbody data-bind="foreach: Operators, click: getopid">

    <tr>

        <td data-bind="text: lastfullname"></td>
        <td data-bind="text: emp_number"></td>
        <td data-bind="text: category"></td>
        <td data-bind="text: number"></td>
        <td data-bind="text: team"></td>
        <td><i class="icon trash"></i></td>
        <td><i class="icon edit"></i></td>

    </tr>
    </tbody>

</table>

now I want a click event on the list so it returns the userid only when someone clicks on the user's name in the list.

Here is my viewmodel:

function AppViewModel() {

self.editop = ko.observableArray([]);
self.Operators = ko.observableArray([]);
//fn Gets JSON data
this.GetData = function() {
    $.ajax({
        url: "opControl.php",
        data: {action: "all"},
        type: "POST",
        dataType: "JSON",
        cache: false,
        success: function (data) {
            var mappedOp = $.map(data, function(item) { return new Opdata(item) });
            self.Operators(mappedOp);
        }, //end success
        error: function (jqXHR, textStatus, errorThrown) {
            alert(jqXHR + errorThrown + textStatus);
        }
    }); //end $.ajax
};
//get operator list now
this.GetData();


this.getopid = function (event,data) {
    alert(event.target);
}




}
ko.applyBindings(new AppViewModel());

I had it working before with something similar to the above function, but I can't remember how I got it to work.

Answer 1

你只需要将你的点击绑定放在foreach（在行）中，点击处理程序的第一个参数就是行数据。

function AppViewModel() {

  self.editop = ko.observableArray([]);
  self.Operators = ko.observableArray([]);
  //fn Gets JSON data
  this.GetData = function() {
    /*
    $.ajax({
      url: "opControl.php",
      data: {
        action: "all"
      },
      type: "POST",
      dataType: "JSON",
      cache: false,
      success: function(data) {
        var mappedOp = $.map(data, function(item) {
          return new Opdata(item)
        });
        self.Operators(mappedOp);
      }, //end success
      error: function(jqXHR, textStatus, errorThrown) {
        alert(jqXHR + errorThrown + textStatus);
      }
    }); //end $.ajax
    */
    self.Operators([{
      lastfullname: 'LFN',
      emp_number: 1,
      category: 'Cat',
      number: 5,
      team: 'Team Cat'
    }]);
  };
  //get operator list now
  this.GetData();


  this.getopid = function(data, event) {
    console.debug(arguments);
    alert(data.lastfullname);
  }




}
ko.applyBindings(new AppViewModel());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<table class="ui table">

  <thead>
    <th class="header small">Operator:</th>
    <th>Employee ID:</th>
    <th>Category:</th>
    <th>Number:</th>
    <th>Team Group</th>
    <th>Delete</th>
    <th>Edit</th>
  </thead>
  <tbody data-bind="foreach: Operators">

    <tr data-bind="click: $parent.getopid">

      <td data-bind="text: lastfullname"></td>
      <td data-bind="text: emp_number"></td>
      <td data-bind="text: category"></td>
      <td data-bind="text: number"></td>
      <td data-bind="text: team"></td>
      <td><i class="icon trash"></i>
      </td>
      <td><i class="icon edit"></i>
      </td>

    </tr>
  </tbody>

</table>

Answer 2

如果您的函数是在根级别声明的并且您在foreach语句中，则需要使用$root关键字来引用它。像这样：

注意：点击功能应在TR而不是TBODY

中声明

<tbody data-bind="foreach: Operators">
    <tr data-bind="click: $root.getopid">
        <td data-bind="text: lastfullname"></td>
        <td data-bind="text: emp_number"></td>
        <td data-bind="text: category"></td>
        <td data-bind="text: number"></td>
        <td data-bind="text: team"></td>
        <td><i class="icon trash"></i></td>
        <td><i class="icon edit"></i></td>
    </tr>
</tbody>

在你的javascript中只需在你的函数中添加一个参数，如下所示：

function AppViewModel() {
   var self = this;
   self.Operators = ko.observableArray([]);
   //...
   self.getopid = function (op) {
      alert(op.lastfullname);
   };
};

Answer 3

This should give an onclick function to each of the cells in your table. If the cell is clicked it will output the value to the console. Hope this helps.

var table = document.getElementById('yourTable'),
    cells = table.getElementsByTagName('td');

for (var i=0,len=cells.length; i<len; i++){
    cells[i].onclick = function(){
        console.log(this.innerHTML);
        /*You can change this part to your desired output*/
    }
}

Get object info on click

3 个答案: