Jquery 将css运行时添加到表行，并对行进行数据绑定

我真的不知道该怎么解决。然而，我非常接近解决方案，现在只需要你们专家的一点帮助。我的工作小提琴是。页面加载时，选中2个复选框。我的观点如下

 <tbody data-bind="foreach: dataOne">
    <tr  data-bind="css: { 'makeBold': $root.duplicates.indexOf(name1) !== -1 }" >
        <td data-bind="text: id"></td><td >&nbsp;&nbsp;&nbsp;</td>
        <td data-bind="text: display"></td><td >&nbsp;&nbsp;&nbsp;</td>
        <td>&nbsp;</td>
        <td>
            <input type="checkbox" data-bind="checked: $root.duplicates.indexOf(name1) !== -1" />
        </td>
    </tr>
</tbody>

现在，当用户单击更新按钮时，它将再次加载数据，现在选中3个复选框。我想要达到的是

当用户单击“更新”按钮时，它应该将css添加到表行中，并且只将该行设置为粗体

当用户单击更新按钮时，不应选中复选框

---

所以在我们的示例中，当用户单击更新按钮时，应该将行设置为粗体，但不应选中复选框。因此，单击“更新”按钮时，只有第一行是粗体的。当前，当页面加载时，它将2行加粗并选中，这是错误的。只有单击“更新”按钮，行才会加粗。请帮帮我。希望这能解决你们的问题

检查这个

Html:-

<table>
<tbody data-bind="foreach: dataOne">
    <tr  data-bind="css: { 'makeBold': $root.duplicates.indexOf(name1) !== -1 }" >
        <td data-bind="text: id"></td><td >&nbsp;&nbsp;&nbsp;</td>
        <td data-bind="text: display"></td><td >&nbsp;&nbsp;&nbsp;</td>
        <td>&nbsp;</td>
        <td>
            <input type="checkbox" data-bind="checked: $root.checkDuplicate.indexOf(name1) !== -1" />
        </td>
    </tr>
</tbody>
</table>
<button class="btn" data-bind="click: $root.UpdateData"> Update </button>

---

希望这能解决你的问题

检查这个

Html:-

<table>
<tbody data-bind="foreach: dataOne">
    <tr  data-bind="css: { 'makeBold': $root.duplicates.indexOf(name1) !== -1 }" >
        <td data-bind="text: id"></td><td >&nbsp;&nbsp;&nbsp;</td>
        <td data-bind="text: display"></td><td >&nbsp;&nbsp;&nbsp;</td>
        <td>&nbsp;</td>
        <td>
            <input type="checkbox" data-bind="checked: $root.checkDuplicate.indexOf(name1) !== -1" />
        </td>
    </tr>
</tbody>
</table>
<button class="btn" data-bind="click: $root.UpdateData"> Update </button>

---

您具有相同的条件$root.duplicates.indexOf（name1）！=-1用于css和checkedbinding@NaveenKumar我意识到了这一点，但不知道我应该为checked和css绑定添加新的observable@NaveenKumar你能告诉我怎么做吗？@Navenkumar当然。非常感谢。您有相同的条件$root。重复项。indexOf（name1）！=-1用于css和checkedbinding@NaveenKumar我意识到了这一点，但不知道我应该为checked和css绑定添加新的observable@NaveenKumar你能告诉我怎么做吗？@Navenkumar当然。非常感谢。只有第一行是粗体的，复选框不会被选中。检查问题，这就是我想要的。请求您友好地更新代码，而不是仅仅摆弄链接，因为链接从来都不是永久的。也容易让别人理解。非常感谢。只有第一行是粗体的，复选框不会被选中。检查问题，这就是我想要的。请求您友好地更新代码，而不是仅仅摆弄链接，因为链接从来都不是永久的。也容易让别人理解。非常感谢。

<table>
<tbody data-bind="foreach: dataOne">
    <tr  data-bind="css: { 'makeBold': $root.duplicates.indexOf(name1) !== -1 }" >
        <td data-bind="text: id"></td><td >&nbsp;&nbsp;&nbsp;</td>
        <td data-bind="text: display"></td><td >&nbsp;&nbsp;&nbsp;</td>
        <td>&nbsp;</td>
        <td>
            <input type="checkbox" data-bind="checked: $root.checkDuplicate.indexOf(name1) !== -1" />
        </td>
    </tr>
</tbody>
</table>
<button class="btn" data-bind="click: $root.UpdateData"> Update </button>

 var data1 = [{
  name1: "one",
  id: 1,
  display: "Test1"
 }, {
  name1: "two",
  id: 2,
  display: "Test2"
 }, {
  name1: "three",
  id: 3,
  display: "Test3"
 }];
var data2 = [{
  name2: "five"
 }, {
 name2: "two"
 }, {
  name2: "three"
 }];

var viewModel = {
 dataOne: ko.observableArray(data1),
 dataTwo: ko.observableArray(data2),
 duplicates: ko.observableArray(),
 checkDuplicate : ko.observableArray() // new observable to handle condition

};


viewModel.UpdateData = function(){
  data2 = [{
     name2: "one"
  }, {
     name2: "two"
  }, {
     name2: "three"
  }];

 viewModel.dataTwo(data2);

 var flattenedOne = ko.utils.arrayMap(viewModel.dataOne(), function (item) {

   return item.name1;
 });

 var flattenedTwo = ko.utils.arrayMap(viewModel.dataTwo(), function (item) {
   return item.name2;
 });

 var differences = ko.utils.compareArrays(flattenedOne, flattenedTwo);
//return a flat list of differences
ko.utils.arrayForEach(differences, function (difference) {

  if (difference.status === 'retained' && viewModel.checkDuplicate().indexOf(difference.value) == -1 ) {
     viewModel.duplicates.push(difference.value);
  }
  });

};   


viewModel.dataTwo.push({
  name: "four"
 }); //add one on the end

 var flattenedOne = ko.utils.arrayMap(viewModel.dataOne(), function (item) {
  return item.name1;
 });

 var flattenedTwo = ko.utils.arrayMap(viewModel.dataTwo(), function (item) {
  return item.name2;
 });

  var differences = ko.utils.compareArrays(flattenedOne, flattenedTwo);
   //return a flat list of differences
  ko.utils.arrayForEach(differences, function (difference) {
    if (difference.status === 'retained') {
      viewModel.checkDuplicate.push(difference.value);
    }
  });

 ko.applyBindings(viewModel);