Question

我有一张表格，其中有三列，即type，1st type，2nd type。在type我有一个按钮，可以在两个值Db和Cr之间切换。如果按钮的值为1st type，我想向列Db添加一个文本框，如果按钮的值为2nd type，则要将文本框添加到列Cr。我尝试了一些东西，但它没有给我想要的结果。

这是我的代码：

$(".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

这样的东西？

$(function(){
	$('button').on('click', function() {
  	var elem = $(this),
    	tds = elem.closest('td').nextUntil('tr');
    tds.html('');
  	if( $(this).text() == 'Db' ) {
    	$(this).text('Cr');
        tds.eq(0).html('<input type="text" name="db" />');
    }
    else {
    	$(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>

有条件地向表列添加文本框

1 个答案: