appendで動的に追加した要素数の取得と要素数による処理について

Question

追加ボタンを押下すると、tableのtrが動的に1行追加され、2回ボタンを欧化し、trが2行になると非活性処理してあるボタンを活性化させたいです。
しかし、trが2行になるとボタンを活性化させるという記述がわからず、困っております。
下記にコードを示します。
jqueryの行数とコメントアウトしている部分が今悩んでいるところです。

<table
									class="sample"
									id="testo">
									<thead>
										<tr>
											<th></th>
											<th>a</th>
											<th>b</th>
											<th>c</th>
											<th>d</th>
											<th>e</th>
									</thead>
									<tbody id="result">
										<tr>
											
										</tr>

	
										<div class="row">
				<div class="col-xs-12">
					<button type="button" id="add" name="add"
						" class="btn  margin-bottom"
						style="color: #ffffff; background-color: #40b740;">追加</button>
				</div>
				
				<div class="col-xs-12">
					<button type="button" id="this" name="this"
						" class="btn  margin-bottom"
						style="color: #ffffff; background-color: #40b740;">このボタンを活性化させたい</button>
				</div>
			</div>
			
			

	$(document).ready(function() {
				// ボタンを非活性にする
				$('[name=this]').prop("disabled", true);
			});
		
	//行数取得
			var rows = $('#result')[0];
			$(document).ready(function() {
				if(rows = 2){
					$('[name=filecomparison_result]').prop("disabled", false);
				}
			});	

よろしくお願い致します。

Comments

[kei344]

「ボタンを押下する」に対するスクリプトが書かれていませんが、それも追記ください。

[yambejp]

addボタンが非活性化しているのにそれを押して２行にはならないのでは？

Answer 1

jQueryを使用しているのならば、

if($('#result').length == 2){

}

でOKですよ。

Comments

[kei344]

tbody#resultなので、'#result tr' では？

[KuninoriTanaka]

あ、すいません、確かにその通りです。
```javascript
if($('#result tr').length == 2){

}
```javascript

Answer 2

中途半端な部分を補完してみました

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function(){
  $('[name=add]').on('click',function(){
    $('#testo').append($('<tr>')
      .append($('<td>').text("test"))
      .append($('<td>').text("test"))
      .append($('<td>').text("test"))
      .append($('<td>').text("test"))
      .append($('<td>').text("test"))
      .append($('<td>').text("test")));
    $('[name=filecomparison_result]').prop("disabled",$('#result tr').length>=2);

  });
});
</script>
<table class="sample" id="testo">
<thead>
<tr>
<th></th>
<th>a</th>
<th>b</th>
<th>c</th>
<th>d</th>
<th>e</th>
</thead>
<tbody id="result">
</tbody>
</table>

<div class="row">
<div class="col-xs-12">
<button type="button" id="add" name="add" class="btn  margin-bottom" style="color: #ffffff; background-color: #40b740;">追加</button>
<input type="button" name="filecomparison_result" value="test">
</div>
</div>

修正

最初不活性で増えると活性化するんでした、以下修正しておきます

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function(){
  $('[name=filecomparison_result]').prop("disabled",true);
  $('[name=add]').on('click',function(){
    $('#testo').append($('<tr>')
      .append($('<td>').text("test"))
      .append($('<td>').text("test"))
      .append($('<td>').text("test"))
      .append($('<td>').text("test"))
      .append($('<td>').text("test"))
      .append($('<td>').text("test")));
    $('[name=filecomparison_result]').prop("disabled",$('#result tr').length<2);
  });
});
</script>
<table class="sample" id="testo">
<thead>
<tr>
<th></th>
<th>a</th>
<th>b</th>
<th>c</th>
<th>d</th>
<th>e</th>
</thead>
<tbody id="result">
</tbody>
</table>

<div class="row">
<div class="col-xs-12">
<button type="button" id="add" name="add" class="btn  margin-bottom" style="color: #ffffff; background-color: #40b740;">追加</button>
<input type="button" name="filecomparison_result" value="test">
</div>
</div>