要显示的JQuery按钮和要隐藏的按钮

时间：2017-09-12 04:16:41

标签： javascript jquery html

我有一个表格（table1）的按钮列表，如果我单击该按钮，它将附加到另一个表格（table2），该按钮将被隐藏。在table2，还有一个按钮可以从该table2中删除/删除，然后table1上的按钮将再次显示。到目前为止，这是我的代码：

var rowNum = 0;
$('.addrow').on('click', function () {
        rowNum++;
        var barang = $(this).parent().find("input[name='rfdn']").val();
        var barangid = $(this).parent().find("input[name='rfdid']").val();
        var price = $(this).parent().find("input[name='rfdp']").val();
        var harga = $(this).parent().find("input[name='rfdpx']").val();
        var qty = $(this).parent().find("input[name='rfdq']").val();

        var row = '<tr id="rowNum' + rowNum + '">';
        row += '<td class="left"><input type="hidden" name="pitem[]" value="' + barangid + '" />' + barang + '</td>';
        row += '<td style="text-align:right;"><input type="number" min="1" max="' + qty + '" name="qty[]" value="1" class="form-control" /></td>';
        row += '<td style="text-align:right;"><input type="hidden" name="price[]" value="' + price + '" />' + harga + '</td>';
        row += '<td><a class="form-control btn btn-info btn-flat" onclick ="removeRow(' + rowNum + ')"><i class="fa fa-minus fa-fw"></i> Delete</a></td></tr>';
        jQuery('#refunds2').append(row);
        $(this).hide();
    });

    function removeRow(rnum) {
        jQuery('#rowNum' + rnum).remove();
        rowNum--;
        $(this).show();
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<table class="list">
	<thead>
		<tr>
			<td>Product</td>
			<td>Refund</td>
			<td>Model</td>
			<td>Quantity</td>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td class="left">Flesh Out</td>
			<td class="center">
				<input type="hidden" class="rf" value="12101" id="rfdid" name="rfdid">
				<input type="hidden" class="rf" value="Flesh Out" id="rfdn" name="rfdn">
				<input type="hidden" class="rf" value="1" id="rfdq" name="rfdq">
				<a class="button addrow">Refund</a>
			</td>
			<td class="left">9786023759774</td>
			<td class="right">1</td>
		</tr>
		<tr>
			<td class="left">#About Love</td>
			<td class="center">
				<input type="hidden" class="rf" value="3413" id="rfdid" name="rfdid">
				<input type="hidden" class="rf" value="#About Love" id="rfdn" name="rfdn">
				<input type="hidden" class="rf" value="1" id="rfdq" name="rfdq">
				<a class="button addrow">Refund</a>
			</td>
			<td class="left">9786020317786</td>
			<td class="right">1</td>
		</tr>
	</tbody>
</table>
<table id="refunds2" class="list">
    <thead>
        <tr>
            <td class="left">Product</td>
            <td>Refund Qty</td>
            <td>Price</td>
            <td></td>
        </tr>
    </thead>
</table>

要添加新行，它已经有效了。但是当我点击删除按钮时，table1上的“退款”按钮不再出现。我的数据可能是多种多样的，不仅仅是2.有时可以是5或10或者100

4 个答案:

答案 0 :(得分：1)

您要添加的rowNum应与隐藏的addrow按钮相关。所以删除后你知道哪个按钮对应了。

请参阅下面的代码。我添加了bootstrap只是为了造型。

var rowNum = 0;
$('.addrow').on('click', function () {
        rowNum = $('.addrow').index(this);
        var barang = $(this).parent().find("input[name='rfdn']").val();
        var barangid = $(this).parent().find("input[name='rfdid']").val();
        var price = $(this).parent().find("input[name='rfdp']").val();
        var harga = $(this).parent().find("input[name='rfdpx']").val();
        var qty = $(this).parent().find("input[name='rfdq']").val();

        var row = '<tr id="rowNum' + rowNum + '">';
        row += '<td class="left"><input type="hidden" name="pitem[]" value="' + barangid + '" />' + barang + '</td>';
        row += '<td style="text-align:right;"><input type="number" min="1" max="' + qty + '" name="qty[]" value="1" class="form-control" /></td>';
        row += '<td style="text-align:right;"><input type="hidden" name="price[]" value="' + price + '" />' + harga + '</td>';
        row += '<td><a class="form-control btn btn-info btn-flat" onclick ="removeRow(' + rowNum + ')"><i class="fa fa-minus fa-fw"></i> Delete</a></td></tr>';
        jQuery('#refunds2').append(row);
        $(this).hide();
    });

    function removeRow(rnum) {
        jQuery('#rowNum' + rnum).remove();
        $('.addrow').eq(rnum).show();
    }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<table class="list table">
	<thead>
		<tr>
			<td>Product</td>
			<td>Refund</td>
			<td>Model</td>
			<td>Quantity</td>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td class="left">Flesh Out</td>
			<td class="center">
				<input type="hidden" class="rf" value="12101" id="rfdid" name="rfdid">
				<input type="hidden" class="rf" value="Flesh Out" id="rfdn" name="rfdn">
				<input type="hidden" class="rf" value="1" id="rfdq" name="rfdq">
				<a class="button addrow">Refund</a>
			</td>
			<td class="left">9786023759774</td>
			<td class="right">1</td>
		</tr>
		<tr>
			<td class="left">#About Love</td>
			<td class="center">
				<input type="hidden" class="rf" value="3413" id="rfdid" name="rfdid">
				<input type="hidden" class="rf" value="#About Love" id="rfdn" name="rfdn">
				<input type="hidden" class="rf" value="1" id="rfdq" name="rfdq">
				<a class="button addrow">Refund</a>
			</td>
			<td class="left">9786020317786</td>
			<td class="right">1</td>
		</tr>
	</tbody>
</table>
<table id="refunds2" class="list table">
    <thead>
        <tr>
            <td class="left">Product</td>
            <td>Refund Qty</td>
            <td>Price</td>
            <td></td>
        </tr>
    </thead>
</table>

答案 1 :(得分：0)

$(this).show()表示removeRow函数，而不是addrow类。所以，最简单的方法是将您的html更改为<a class="button" >Refund</a>，然后将$(".addrow").show()更改为$(this).show()

像这样：

var rowNum = 0;
$('.addrow').on('click', function () {
        rowNum++;
        var barang = $(this).parent().find("input[name='rfdn']").val();
        var barangid = $(this).parent().find("input[name='rfdid']").val();
        var price = $(this).parent().find("input[name='rfdp']").val();
        var harga = $(this).parent().find("input[name='rfdpx']").val();
        var qty = $(this).parent().find("input[name='rfdq']").val();

        var row = '<tr id="rowNum' + rowNum + '">';
        row += '<td class="left"><input type="hidden" name="pitem[]" value="' + barangid + '" />' + barang + '</td>';
        row += '<td style="text-align:right;"><input type="number" min="1" max="' + qty + '" name="qty[]" value="1" class="form-control" /></td>';
        row += '<td style="text-align:right;"><input type="hidden" name="price[]" value="' + price + '" />' + harga + '</td>';
        row += '<td><a class="form-control btn btn-info btn-flat" onclick ="removeRow(' + rowNum + ')"><i class="fa fa-minus fa-fw"></i> Delete</a></td></tr>';
        jQuery('#refunds2').append(row);
        $(this).hide();
    });

    function removeRow(rnum) {
        jQuery('#rowNum' + rnum).remove();
        rowNum--;
        $(".addrow").show();
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<table class="list">
	<thead>
		<tr>
			<td>Product</td>
			<td>Refund</td>
			<td>Model</td>
			<td>Quantity</td>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td class="left">Flesh Out</td>
			<td class="center">
				<input type="hidden" class="rf" value="12101" id="rfdid" name="rfdid">
				<input type="hidden" class="rf" value="Flesh Out" id="rfdn" name="rfdn">
				<input type="hidden" class="rf" value="1" id="rfdq" name="rfdq">
				<a class="button addrow">Refund</a>
			</td>
			<td class="left">9786023759774</td>
			<td class="right">1</td>
		</tr>
		<tr>
			<td class="left">#About Love</td>
			<td class="center">
				<input type="hidden" class="rf" value="3413" id="rfdid" name="rfdid">
				<input type="hidden" class="rf" value="#About Love" id="rfdn" name="rfdn">
				<input type="hidden" class="rf" value="1" id="rfdq" name="rfdq">
				<a class="button addrow">Refund</a>
			</td>
			<td class="left">9786020317786</td>
			<td class="right">1</td>
		</tr>
	</tbody>
</table>
<table id="refunds2" class="list">
    <thead>
        <tr>
            <td class="left">Product</td>
            <td>Refund Qty</td>
            <td>Price</td>
            <td></td>
        </tr>
    </thead>
</table>

答案 2 :(得分：0)

添加两个ID refund0 <a class="button addrow" id="refund0">Refund</a>和退款1 <a class="button addrow" id="refund1">Refund</a>，然后在 removeRow

中显示这些ID 
function removeRow(rnum) {
            jQuery('#rowNum' + rnum).remove();
            rowNum--;
            $("#refund0").show();
            $("#refund1").show();
        }

功能

var rowNum = 0;
$('.addrow').on('click', function () {
        rowNum++;
        var barang = $(this).parent().find("input[name='rfdn']").val();
        var barangid = $(this).parent().find("input[name='rfdid']").val();
        var price = $(this).parent().find("input[name='rfdp']").val();
        var harga = $(this).parent().find("input[name='rfdpx']").val();
        var qty = $(this).parent().find("input[name='rfdq']").val();

        var row = '<tr id="rowNum' + rowNum + '">';
        row += '<td class="left"><input type="hidden" name="pitem[]" value="' + barangid + '" />' + barang + '</td>';
        row += '<td style="text-align:right;"><input type="number" min="1" max="' + qty + '" name="qty[]" value="1" class="form-control" /></td>';
        row += '<td style="text-align:right;"><input type="hidden" name="price[]" value="' + price + '" />' + harga + '</td>';
        row += '<td><a class="form-control btn btn-info btn-flat" onclick ="removeRow(' + rowNum + ')"><i class="fa fa-minus fa-fw"></i> Delete</a></td></tr>';
        jQuery('#refunds2').append(row);
        $(this).hide();
    });

    function removeRow(rnum) {
        jQuery('#rowNum' + rnum).remove();
        rowNum--;
        $("#refund0").show();
        $("#refund1").show();
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<table class="list">
	<thead>
		<tr>
			<td>Product</td>
			<td>Refund</td>
			<td>Model</td>
			<td>Quantity</td>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td class="left">Flesh Out</td>
			<td class="center">
				<input type="hidden" class="rf" value="12101" id="rfdid" name="rfdid">
				<input type="hidden" class="rf" value="Flesh Out" id="rfdn" name="rfdn">
				<input type="hidden" class="rf" value="1" id="rfdq" name="rfdq">
				<a class="button addrow" id="refund0">Refund</a>
			</td>
			<td class="left">9786023759774</td>
			<td class="right">1</td>
		</tr>
		<tr>
			<td class="left">#About Love</td>
			<td class="center">
				<input type="hidden" class="rf" value="3413" id="rfdid" name="rfdid">
				<input type="hidden" class="rf" value="#About Love" id="rfdn" name="rfdn">
				<input type="hidden" class="rf" value="1" id="rfdq" name="rfdq">
				<a class="button addrow" id="refund1">Refund</a>
			</td>
			<td class="left">9786020317786</td>
			<td class="right">1</td>
		</tr>
	</tbody>
</table>
<table id="refunds2" class="list">
    <thead>
        <tr>
            <td class="left">Product</td>
            <td>Refund Qty</td>
            <td>Price</td>
            <td></td>
        </tr>
    </thead>
</table>

答案 3 :(得分：0)

而不是declare -a manual=("$pg1" "$pg2" "$pg3" "$pg4" "$pg5" "$pg6" "$pg7" "$pg8" "$pg9" "$pg10") x=0 while [ $x -lt "10" ] do read a if [ a -eq 1 ]; then echo ${manual[$x-1]} x=$(($x-1)) elif [ a -eq 2 ]; then echo ${manual[$x+1]} x=$(($x+1)) elif [ a -eq 3 ]; then echo ${manual[10]} else [ a -eq 4 ]; bash mainmenu.sh fi done 你只需要替换＆＃34;这个＆＃34;到＆＃34; .addrow＆＃34;。

$(this).show()
相关问题
最新问题