Javascript 从所选表行Knockout.js获取值

我需要一点帮助

我已经创建了一个从JSON响应中获取值的表，但对于本例，让我们创建一个硬编码的html表，如下所示：

<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/>

---

项目链接在这里：

我已经为您创建了一个演示，但要了解它是如何工作的，您应该调查淘汰文档

视图模型：

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

---

以下是一个如何做到这一点的示例：

并将文本框绑定到所选

属性中的属性：

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

更新为包含启用绑定（）。添加是否编辑的属性：

self.enableEdit = ko.observable(false);

然后更新
选择
函数以将其设置为true：

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

如果/当您保存或取消时，您可以根据需要将其设置回false

更新输入框上的绑定：

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


假设您的表实际上是使用
foreach
绑定构建的，只需在
tr
上添加一个click绑定，并使用该绑定更新
selectedRow
可观察的。是的，我使用foreach创建了表。请访问此链接以正确查看我已更新它非常感谢您的支持。但我还想在select事件上启用文本框。我试着像Alexander在他的解决方案中那样使用attr，但它破坏了一切，函数也不起作用。谢谢你的回答。它也起了作用。但由于我的知识不多，我无法将其与Json响应匹配。您是否可以使用var myData=[{id:“001”，name:“Jhon”，status:“Single”}，{id:“002”，name:“Mike”，status:“Marrie”}，{id:“003”，name:“Marrie”，status:“complex”}等数据修改此示例；因为我发现你们的解决方案对我来说更具可读性，所以我已经更改了答案和演示，也许你们忘了更新演示的链接。谢谢你的支持
<tr data-bind="click: $parent.select">

self.enableEdit = ko.observable(false);

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

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