オブジェクトの配列をチェックボックス内のテキストボックス値で置換/更新する方法 - jquery

Question

linkをチェックしてください。

最初にチェックボックスをオンにして2つの行を選択し、テキストボックスにテキストを追加すると、オブジェクトの配列にそのプロパティを持つ2つのオブジェクトがありますが、2回目にその2つの行他のオブジェクトの選択を解除してテキストボックスに値を与えると、その配列内のオブジェクトでオブジェクトを更新する必要があります。現在は別のオブジェクトを追加しています。

また、配列内にcompany 、それは別のオブジェクトとしてそれを追加する必要があります。

どのようにチェックされた各機能でそれを書くか？

HTML：

<table> 
<tr> 
    <th>checkbox</th> 
    <th>Company</th> 
    <th>Contact</th> 
    <th>Country</th> 
</tr> 
<tr> 
    <td><input name="eachRow" type="checkbox" /> </td> 
    <td>Alfreds </td> 
    <td>Maria </td> 
    <td>Germany</td> 
</tr> 
<tr> 
    <td><input name="eachRow" type="checkbox" /> </td> 
    <td>Centro </td> 
    <td>Francisco </td> 
    <td>Mexico</td> 
</tr> 
<tr> 
    <td><input name="eachRow" type="checkbox" /> </td> 
    <td>Ernst </td> 
    <td>Roland </td> 
    <td>Austria</td> 
</tr> 
<tr> 
    <td><input name="eachRow" type="checkbox" /> </td> 
    <td>Island </td> 
    <td>Helen </td> 
    <td>UK</td> 
</tr> 
<tr> 
    <td><input name="eachRow" type="checkbox" /> </td> 
    <td>Laughing </td> 
    <td>Yoshi </td> 
    <td>Canada</td> 
</tr> 
<tr> 
    <td><input name="eachRow" type="checkbox" /> </td> 
    <td>Magazzini </td> 
    <td>Giovanni </td> 
    <td>Italy</td> 
</tr> 

CSS：

table { 
    font-family: arial, sans-serif; 
    border-collapse: collapse; 
    width: 100%; 
} 

td, th { 
    border: 1px solid #dddddd; 
    text-align: left; 
    padding: 8px; 
} 

tr:nth-child(even) { 
    background-color: #dddddd; 
} 

のjQuery：

var selectedRows = []; 
    function getdetails() { 
     var modifier = $('#txtBox').val(); 
     $.each($("input[name='eachRow']:checked").parents("tr"), function() { 
      selectedRows.push({ 
       company: $(this).find('td:eq(1)').text(), 
       contact: modifier 
      }); 
      console.log(selectedRows); 
     }); 
    } 

Answer 1

コードは、ボタンをクリックするたびに、チェックされたすべてのオブジェクトを配列にプッシュします。

function getdetails() { 
    var selectedRows = []; 
    var modifier = $('#txtBox').val(); 
    $.each($("input[name='eachRow']:checked").parents("tr"), function() { 
     selectedRows.push({ 
      company: $(this).find('td:eq(1)').text(), 
      contact: modifier 
     }); 
    }); 
    console.log(selectedRows); 
} 

（関数内で選択された行の初期化を追加する）を使用すると、毎回新しい計算が行われます。ボタンの各クリックで要素を更新するだけでよい場合は、別の方法が必要です。