Hinzufügen von Text-Box zu Tabellenspalten bedingt

Question

Ich habe eine Tabelle, in der ich drei Spalten habe, nämlich type, 1st type, 2nd type. In type Ich habe eine Schaltfläche, die zwischen zwei Werten, Db und Cr schaltet. Ich möchte der Spalte 1st type ein Textfeld hinzufügen, wenn der Wert der Schaltfläche Db ist, und der Spalte 2nd type Textfeld hinzufügen, wenn der Wert der Schaltfläche Cr ist. Ich habe etwas versucht, aber es gibt mir nicht das gewünschte Ergebnis.

Hier ist mein Code:

$(".pushme").click(function() { 
    $(this).text(function(i, v){ 
     return v === 'Db' ? 'Cr' : 'Db' 
    }) 
}); 

$(function(){ 
    if($(".pushme").value="Db"){ 
     $("#D-amt").append('<input type="text" name="db" />'); 
    } 
    else{ 
     $("#C-amt").append('<input type="text" name="cr" />'); 
    } 
}); 

<tbody> 
    <tr> 
     <td><button class='pushme'>Click me</button></td> 
     <td id="D-amt"></td> 
     <td id="C-amt"></td> 
    </tr> 
</tbody> 

Answer 1

So etwas wie das?

$(function(){ 
 
\t $('button').on('click', function() { 
 
    \t var elem = $(this), 
 
    \t tds = elem.closest('td').nextUntil('tr'); 
 
    tds.html(''); 
 
    \t if($(this).text() == 'Db') { 
 
    \t $(this).text('Cr'); 
 
     tds.eq(0).html('<input type="text" name="db" />'); 
 
    } 
 
    else { 
 
    \t $(this).text('Db'); 
 
     tds.eq(1).html('<input type="text" name="cr" />');  
 
    } 
 
    }) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
<thead> 
 
    <tr><td>Type</td><td>Type 1</td><td>Type 2</td></tr> 
 
</thead> 
 
<tbody> 
 
    <tr> 
 
     <td><button>Db</button></td> 
 
     <td></td> 
 
     <td></td> 
 
    </tr> 
 
    <tr> 
 
     <td><button>Db</button></td> 
 
     <td></td> 
 
     <td></td> 
 
    </tr> 
 
    <tr> 
 
     <td><button>Db</button></td> 
 
     <td></td> 
 
     <td></td> 
 
    </tr> 
 
</tbody> 
 
</table>