eine Schaltfläche, um die im Inneren td auf einem Tisch und andere td erhalten Werte

Question

Ich möchte eine Schaltfläche klicken, die in einem <td> ist und wenn hier die Werte anderer <td>, die innerhalb eines <tr> geklickt ist der Code so weit :

 $(document).ready(function(){ 
 
    \t \t \t $('#main').find('tr').on("click", function() { 
 
    \t \t \t \t var customerId = $(this).find('td:eq(1)').text(); 
 
    \t \t \t \t \t $('#texti').text(customerId); 
 
    \t \t }); 
 
    
 
     });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button>Add new list item</button> 
 
     <p>Click the above button to dynamically add new list items. You can remove it later.</p> 
 
    \t <table id="main"> 
 
     <tr> 
 
      <td>list item 1 </td> 
 
      <td>list item 2 </td> 
 
      <td>list item 3 </td> 
 
    \t \t <td ><input type='button' value='Update' name ='updateBox' id='updateBox' /></td> 
 
     </tr> 
 
    \t <tr> 
 
      <td>list item 4</td> 
 
      <td>list item 5</td> 
 
      <td>list item 6</td> 
 
    \t \t <td ><input type='button' value='Update' name ='updateBox' id='updateBox' /></td> 
 
     </tr> 
 
    \t <tr> 
 
      <td>list item 7</td> 
 
      <td>list item 8</td> 
 
      <td>list item 9</td> 
 
    \t \t <td ><input type='button' value='Update' name ='updateBox' id='updateBox' /></td> 
 
     </tr> 
 
    \t </table> 
 
    \t <a name="texti" id="texti"> x </a>

dieser Code funktioniert, aber ich will nur die Taste, dies zu tun. In meinem Code, wenn ich auf den Listenpunkt 1, den Listenpunkt 2 oder den Listenpunkt 3 klicke, arbeiten sie als Button. Ich will das nicht, ich möchte anklickbar auf die Schaltfläche

Answer 1

1.ändern Sie find('tr') zu find('tr input') es nur Schaltfläche Typ übereinstimmen.

2. closest Funktion gibt die nächste Tabellenzeile zurück (für uns die Zeile, die die Schaltfläche enthält). diese

Verwendung:

$('#main').find('tr input').on("click", function() { 
    var customerId = $(this).closest('tr').find('td:eq(1)').text(); 
    $('#texti').text(customerId); 
}); 

Hier ist jsfiddle: solution

Answer 2

1.try mit $("input[type='button']") es nur Taste anzeigen lassen.

2. closest() .Ihre Übereinstimmung schließt den übergeordneten Knoten.

3.Dann find('td:eq(1)'). wenn alle müssen den Wert von tr entfernen Sie einfach find('td:eq(1)')

$(document).ready(function(){ 
 
      $("input[type='button']").on("click", function() { 
 
       var customerId = $(this).closest('tr').find('td:eq(1)').text(); 
 
        $('#texti').text(customerId); 
 
     }); 
 

 
    });

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 
 

 
    <button>Add new list item</button> 
 
    <p>Click the above button to dynamically add new list items. You can remove it later.</p> 
 
    <table id="main"> 
 
    <tr> 
 
     <td>list item 1 </td> 
 
     <td>list item 2 </td> 
 
     <td>list item 3 </td> 
 
     <td ><input type='button' value='Update' name ='updateBox' id='updateBox' /></td> 
 
    </tr> 
 
    <tr> 
 
     <td>list item 4</td> 
 
     <td>list item 5</td> 
 
     <td>list item 6</td> 
 
     <td ><input type='button' value='Update' name ='updateBox' id='updateBox' /></td> 
 
    </tr> 
 
    <tr> 
 
     <td>list item 7</td> 
 
     <td>list item 8</td> 
 
     <td>list item 9</td> 
 
     <td ><input type='button' value='Update' name ='updateBox' id='updateBox' /></td> 
 
    </tr> 
 
    </table> 
 
    <a name="texti" id="texti"> x </a>

Answer 3

Ihre Click-Ereignis für die gesamte Zeile ist, so ist der erste Schritt, um es für die Schaltfläche nur machen:

$("#main tr input[type='button']").on("click", function() { 

der Event-Handler ist dann für die Schaltfläche, so müssen Sie bis zu der Zeile, um die Zellen zu erhalten:

$("#main tr input[type='button']").on("click", function() { 
    var row = $(this).closest("tr"); 
    var customerId = row.find('td:eq(1)').text(); 
    $('#texti').text(customerId); // assume this is outside the row 
}); 

---

Als Extra, empfehle ich Ihnen zeigen, welche Zelle die Daten, die Sie, indem es eine Klasse wollen enthält, dann müssen Sie nicht Index verwenden:

<tr> 
    <td>list item 1 </td> 
    <td class='data-customerid'>list item 2 </td> 
    <td>list item 3 </td> 
    <td ><input type='button' value='Update' name ='updateBox' id='updateBox' /></td> 
</tr> 

dann

var customerId = row.find("td.data-customer-id').text(); 

Answer 4

Sie sollten klicken Sie auf Eingabe und nicht auf tr. Durchqueren Sie jede Zeile und suchen Sie nach Eingabe- und Bindungsereignissen.

$(document).ready(function(){ 
    $('tr').each(function(){ 
    var _this = this; 
    $(this).find('input#updateBox').on("click", function() { 
      var customerId = $(_this).find('td:eq(1)').text(); 
       $('#texti').text(customerId); 
    }); 
    }); 
}); 

Answer 5

Sie können auch verwenden:

$(document).ready(function() { 
      $('#main').on("click", 'input[type="button"]', function() { 
       var customerId = $(this).parent().siblings('td:eq(1)').text(); 
       $('#texti').text(customerId); 
      }); 

     }); 

Check in fiddle.

Answer 6

Versuchen Tasten durch die * Name Attribut

$("input[name*='updateBox']").on("click", function() 
{ 
    var customerId = $(this).closest('tr').find('td:eq(1)').text(); 
    $('#texti').text(customerId); 
}); 

Answer 7

Änderung $('#main').find('tr').on("click", function()...

zu

$('#main').find('tr td input').on("click", function()...