javascript - Get value from selected Table row Knockout.js - Stack Overflow

admin管理员组

文章数量:1291062

I need a little help.

I have created a table that gets values from JSON response, but for this example lets create a hardcoded html table like following:

<table id="devtable">
    <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Status</th>
    </tr>
    <tr>
        <td>001</td>
        <td>Jhon</td>
        <td>Single</td>
    </tr>
    <tr>
        <td>002</td>
        <td>Mike</td>
        <td>Married</td>
    </tr>
    <tr>
        <td>003</td>
        <td>Marrie</td>
        <td>Complicated</td>
    </tr>
</table>
ID : <input type="text" name="ID" data-bind="value: ID" disabled/>
<br>
Name : <input type="text" name="Name" data-bind="value: Name" disabled/>
<br>
Status : <input type="text" name="Status" data-bind="value: Status" disabled/>
<br>
<input type="button" value="Send" disabled/>

Requirement is: when I select a row of table, values of columns goes to the input boxes and enable button as well. As I am trying to learn Knockout.js by doing this exercise. I think I have to make a viewmodel like this:

var rowModel = function (id, name, status) {
    this.ID = ko.observable(id);
    this.Name = ko.observable(name);
    this.Status = ko.observable(status);
}

Link of project is here: /

I need a little help.

I have created a table that gets values from JSON response, but for this example lets create a hardcoded html table like following:

<table id="devtable">
    <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Status</th>
    </tr>
    <tr>
        <td>001</td>
        <td>Jhon</td>
        <td>Single</td>
    </tr>
    <tr>
        <td>002</td>
        <td>Mike</td>
        <td>Married</td>
    </tr>
    <tr>
        <td>003</td>
        <td>Marrie</td>
        <td>Complicated</td>
    </tr>
</table>
ID : <input type="text" name="ID" data-bind="value: ID" disabled/>
<br>
Name : <input type="text" name="Name" data-bind="value: Name" disabled/>
<br>
Status : <input type="text" name="Status" data-bind="value: Status" disabled/>
<br>
<input type="button" value="Send" disabled/>

Requirement is: when I select a row of table, values of columns goes to the input boxes and enable button as well. As I am trying to learn Knockout.js by doing this exercise. I think I have to make a viewmodel like this:

var rowModel = function (id, name, status) {
    this.ID = ko.observable(id);
    this.Name = ko.observable(name);
    this.Status = ko.observable(status);
}

Link of project is here: http://jsfiddle/qWmat/

• javascript
• jquery
• knockout.js

Share Improve this question Follow edited Jan 28, 2014 at 17:40 alexmac 19.6k77 gold badges6464 silver badges7474 bronze badges asked Jan 28, 2014 at 17:35 user3242446user3242446 3511 gold badge22 silver badges77 bronze badges 2

• Assuming your table is actually built using a foreach binding, just add a click binding on your tr and use that to update a selectedRow observable. – Matt Burland Commented Jan 28, 2014 at 17:44
• Yes I used foreach to create table. Please visit this link to see properly jsfiddle/qWmat/2 I have updated it – user3242446 Commented Jan 28, 2014 at 17:55

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

Here's an example of how you could do it:

http://jsfiddle/qWmat/3/

function MyVM(data) {
    var self = this;

    self.items = ko.observableArray(data.map(function (i) {
        return new rowModel(i.id, i.name, i.status);
    }));

    self.select = function(item) {
        self.selected(item);
    }; 

    self.selected = ko.observable(self.items()[0]);
} 

And you bind your textboxes to the properties in the selected property:

<input type="text" name="ID" data-bind="value: selected().ID" disabled/>

And you bind the click handler in your tr like so:

<tr data-bind="click: $parent.select">

Updated to include enable binding (http://jsfiddle/qWmat/8/). Add a property for whether or not to edit:

self.enableEdit = ko.observable(false);

Then update your select function to turn it to true:

self.select = function(item) {
    self.selected(item);
    self.enableEdit(true);
};

If / when you save or cancel you could the set it back to false if you want.

Update your bindings on the input boxes:

<input type="text" name="Status" data-bind="value: selected().Status, enable: enableEdit" />

I've created a demo for you, but to know how it works, you should investigate knockout documentation.

ViewModel:

<table id="devtable">
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Status</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: Items" > 
        <tr data-bind='click: $parent.setEditItem'>
            <td data-bind="text: ID"></td>
            <td data-bind="text: Name"></td>
            <td data-bind="text: Status"></td>
        </tr>
    </tbody>
</table>

<!-- ko with: SelectedItem -->
ID :
<input type="text" name="ID" data-bind="value: ID, attr: {disabled: !$parent.IsEditMode()}" />
<br>Name :
<input type="text" name="Name" data-bind="value: Name, attr: {disabled: !$parent.IsEditMode()}"/>
<br>Status :
<input type="text" name="Status" data-bind="value: Status, attr: {disabled: !$parent.IsEditMode()}"/>
<br>
<input type="button" value="Send" data-bind="attr: {disabled: !$parent.IsEditMode()}"/>
<!-- /ko -->

Html:

function ItemModel(id, name, status) {
    var self = this;

    self.ID = ko.observable(id);
    self.Name = ko.observable(name);
    self.Status = ko.observable(status);  
}

function ViewModel() {
    var self = this;

    self.Items = ko.observableArray([
        new ItemModel('001', 'Jhon', 'Single'),
        new ItemModel('002', 'Mike', 'Married'),
        new ItemModel('003', 'Marrie', 'Complicated')
    ]);
    self.SelectedItem = ko.observable(new ItemModel());
    self.IsEditMode = ko.observable();

    self.setEditItem = function(item) {
        self.SelectedItem(item);
        self.IsEditMode(true);
    }
}

var viewModel = new ViewModel();
ko.applyBindings(viewModel);

Demo

本文标签： javascriptGet value from selected Table row KnockoutjsStack Overflow