Question

我用JQuery创建了一个表格，我可以通过按下按钮来添加某个文本。

如您所见，产品2和产品3只能添加一次。产品4可以添加几次。插入的所有文本也可以通过按x - 按钮删除。

＆＃13;

$(".btn.btn-primary.btn-sm").on("click", this.ourClickDispatcher.bind(this))
$("#tableProd").on("click", ".btn.btn-danger.btn-sm.deleteMe", this.deleteRow.bind(this))

function deleteRow(e) {
  let deleteBtn = $(e.target).closest(".deleteMe");
  deleteBtn.closest('tr').remove()
}

function ourClickDispatcher(e) {
  let targetButton = $(e.target).closest(".btn.btn-primary.btn-sm")
  let targetButtonParent = targetButton[0].parentElement.parentElement

  targetButtonParent.insertAdjacentHTML('afterend', `
             <tr>
                <td></td>
                <td>
                    <img src="" alt="" height="42" width="42">
                    <a href="">
                        Test Product2
                    </a>
                </td>    
                <td class="deleteMe">
                        <button type="button" class="btn btn-danger btn-sm deleteMe">x</button>
                    </td>   
             </tr>
            `)
  if (targetButton.hasClass('product3') || targetButton.hasClass('product2')) {
    targetButton.attr("disabled", true);
  }
}

＆＃13;

<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/2.1.1/jquery.min.js"></script>
<table id="tableProd" style="float: left;" class="table table-bordered">
  <tbody>
    <tr>
      <td>Product 2</td>
      <td>
        <button type="button" data-exists="product2" class="btn btn-primary btn-sm product2">
                                            Add Product 2
                                        </button>
      </td>
    </tr>
    <tr>
      <td>Product 3</td>
      <td>
        <button type="button" data-exists="product3" class="btn btn-primary btn-sm product3">
                                            Add Product 3
                                        </button>
      </td>
    </tr>
    <tr>
      <td>Product 4</td>
      <td>
        <button type="button" data-exists="product4" class="btn btn-primary btn-sm product4">
                                            Add Product 4
                                     
      </td>
    </tr>
  </tbody>
</table>

＆＃13;

我的问题是如果我删除disabled按钮下面的所有行，我就无法再添加任何新行。这种情况如下图所示：

如果删除了以下所有行，如何enable按钮的任何建议？

感谢您的回复！

Answer 1

I added you one new function to your javascript

    function enableButton(elemId) {
        console.log(document.getElementById(elemId));
        if (!document.getElementById(elemId)) {
            var str = elemId.split('_');
            var button = $('#'+str[1]);
            $('#'+str[1]).removeAttr('disabled');
        }
    }

and i also set ids on your html buttons

$(".btn.btn-primary.btn-sm").on("click", this.ourClickDispatcher.bind(this))
	$("#tableProd").on("click", ".btn.btn-danger.btn-sm.deleteMe", this.deleteRow.bind(this))

	function deleteRow(e) {
	  	let deleteBtn = $(e.target).closest(".deleteMe");
	  	let itemId = e.target.getAttribute('id');
	  	deleteBtn.closest('tr').remove();
	  	enableButton(itemId);
	}

	function enableButton(elemId) {
		if (!document.getElementById(elemId)) {
			var str = elemId.split('_');
			var button = $('#'+str[1]);
			$('#'+str[1]).removeAttr('disabled');
		}
	}

	function ourClickDispatcher(e) {
	  	let targetButton = $(e.target).closest(".btn.btn-primary.btn-sm");
	  	let targetButtonParent = targetButton[0].parentElement.parentElement;

	  	var elemId = 'item_'+e.target.getAttribute('id');
	  	targetButtonParent.insertAdjacentHTML('afterend', `
	             <tr>
	                <td></td>
	                <td>
	                    <img src="" alt="" height="42" width="42">
	                    <a href="">
	                        Test Product2
	                    </a>
	                </td>    
	                <td class="deleteMe">
	                        <button  id='`+elemId+`' type="button" class="btn btn-danger btn-sm deleteMe">x</button>
	                    </td>   
	             </tr>
	            `)
  		if (targetButton.hasClass('product3') || targetButton.hasClass('product2')) {
    		targetButton.attr("disabled", true);
	 	}
	}

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<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/2.1.1/jquery.min.js"></script>
<table id="tableProd" style="float: left;" class="table table-bordered">
  <tbody>
    <tr>
      <td>Product 2</td>
      <td>
        <button type="button" id='btn2' data-exists="product2" class="btn btn-primary btn-sm product2">
            Add Product 2
        </button>
      </td>
    </tr>
    <tr>
      <td>Product 3</td>
      <td>
        <button type="button" id='btn3' data-exists="product3" class="btn btn-primary btn-sm product3">
            Add Product 3
        </button>
      </td>
    </tr>
    <tr>
      <td>Product 4</td>
      <td>
        <button type="button" id='btn4' data-exists="product4" class="btn btn-primary btn-sm product4">
        	Add Product 4
         </button>                            
      </td>
    </tr>
  </tbody>
</table>
</body>
</html>

Answer 2

只需在$(".btn.btn-primary.btn-sm").attr("disabled", false);方法的末尾添加deleteRow。

＆＃13;

$(".btn.btn-primary.btn-sm").on("click", this.ourClickDispatcher.bind(this))
$("#tableProd").on("click", ".btn.btn-danger.btn-sm.deleteMe", this.deleteRow.bind(this))

function deleteRow(e) {
  let deleteBtn = $(e.target).closest(".deleteMe");
  deleteBtn.closest('tr').remove();
  $(".btn.btn-primary.btn-sm").attr("disabled", false);
}

function ourClickDispatcher(e) {
  let targetButton = $(e.target).closest(".btn.btn-primary.btn-sm")
  let targetButtonParent = targetButton[0].parentElement.parentElement

  targetButtonParent.insertAdjacentHTML('afterend', `
             <tr>
                <td></td>
                <td>
                    <img src="" alt="" height="42" width="42">
                    <a href="">
                        Test Product2
                    </a>
                </td>    
                <td class="deleteMe">
                        <button type="button" class="btn btn-danger btn-sm deleteMe">x</button>
                    </td>   
             </tr>
            `)
  if (targetButton.hasClass('product3') || targetButton.hasClass('product2')) {
    targetButton.attr("disabled", true);
  }
}

＆＃13;

<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/2.1.1/jquery.min.js"></script>
<table id="tableProd" style="float: left;" class="table table-bordered">
  <tbody>
    <tr>
      <td>Product 2</td>
      <td>
        <button type="button" data-exists="product2" class="btn btn-primary btn-sm product2">
                                            Add Product 2
                                        </button>
      </td>
    </tr>
    <tr>
      <td>Product 3</td>
      <td>
        <button type="button" data-exists="product3" class="btn btn-primary btn-sm product3">
                                            Add Product 3
                                        </button>
      </td>
    </tr>
    <tr>
      <td>Product 4</td>
      <td>
        <button type="button" data-exists="product4" class="btn btn-primary btn-sm product4">
                                            Add Product 4
                                     
      </td>
    </tr>
  </tbody>
</table>

＆＃13;

如果已删除下面的所有行，请启用按钮

2 个答案: