2016-06-30 9 views
0

zu erhalten. Ich habe eine Tabelle mit vier Spalten als zweites Absatzfeld, das dritte ist ein Eingabefeld und das vierte ist eine Schaltfläche. Was ich möchte, ist beim Klicken auf die Schaltfläche Zeile die Daten aus der Absatzspalte sollte auf das Eingabefeld, d. H. Dritte Zeile angewendet werden.Es ist nicht möglich, Daten aus der zweiten Spalte einer Tabelle durch Klicken auf die Schaltfläche in der dritten Spalte

Es ist nicht möglich, jede Zeile mit jeder Funktion auszuwählen, da jede Zeile unterschiedlich ist und nur wenige Zeilen wie diese enthalten sind. Wie kann das

ich versucht habe dies getan werden, aber es nicht

var or1 = $("#tab_logic button"); 
 
\t \t \t \t or1.each(function() { 
 
\t \t \t \t \t $(this).click(function(){ 
 
\t \t \t \t \t \t alert("u"); 
 
\t \t \t \t \t \t var u = $(this).parent("tr").find('td:first').html(); 
 
\t \t \t \t \t \t alert(u); 
 
\t \t \t \t \t }); 
 
\t \t \t \t });

+1

Könnten Sie bitte etwas HTML teilen, wie es twendig ist zu sehen, wie Ihre Seite einrichten ist? – Jorrex

+1

überprüfen Sie diese [Frage] (http://stackoverflow.com/questions/38095769/ajax-get-table-value-based-on-row/38096402#38096402) – Arnial

+0

Seitliche Notiz, die jedes() von der or1 ist nicht notwendig. jQuery macht die Schleifenbindung von click() für Sie (Sie sollten aber wirklich auf ('klicken') verwenden). – Taplar

Antwort

2

Ohne den genauen HTML-Kenntnisse nicht funktioniert, habe ich dies auf der Grundlage Ihrer Erklärung. Wenn ich das richtig verstehe, wollen Sie das erreichen?

$("button").click(function() { 
 
\t var row = $(this).closest("tr"); 
 
    var name = row.find("p").html(); 
 
    var input = row.find("input"); 
 
    input.val(name); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <thead> 
 
    <th>ID</th> 
 
    <th>Name</th> 
 
    <th>Input</th> 
 
    <th>Button</th> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>1</td> 
 
     <td><p>John Doe</p></td> 
 
     <td><input type="text" placeholder="Name"/></td> 
 
     <td><button type="button">Set name</button></td> 
 
    </tr> 
 
    <tr> 
 
     <td>1</td> 
 
     <td><p>Jane Doe</p></td> 
 
     <td><input type="text" placeholder="Name"/></td> 
 
     <td><button type="button">Set name</button></td> 
 
    </tr> 
 
    </tbody> 
 
</table>

0

wäre eine andere Lösung

sein

var or1 = $("#tab_logic button"); 
 
or1.each(function() { 
 
    $(this).click(function() { 
 
    var text = $(this).closest('tr').children('td:eq(1)').children().first().html(); 
 
    $(this).closest('tr').children('td:eq(2)').children().first().val(text); 
 
    }); 
 
});
#tab_logic td{ 
 
    border: 1px solid black; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="tab_logic"> 
 
    <tr> 
 
    <td>one</td> 
 
    <td><p>I'm just a paragraph</p></td> 
 
    <td><input type="text"/></td> 
 
    <td><button>button</button></td> 
 
    </tr> 
 
    <tr> 
 
    <td>two</td> 
 
    <td><p>I'm just another paragraph</p></td> 
 
    <td><input type="text"/></td> 
 
    <td><button>button</button></td> 
 
    </tr> 
 
</table>

Verwandte Themen