jqueryを使用してリストからテーブルにオブジェクトを挿入します

Question

私は3つの列を持つボタンとテーブルのリストを持っています。ユーザーがボタンをクリックしたときに、JQueryでテーブルの列にボタンの値を挿入したいとします。 JQueryでこれを行う方法はありますか？

$(document).ready(function() { 
 
\t var num; 
 
    $('#selction li a').click(function() { 
 
\t \t num = $(this).text(); 
 
\t \t $('tr > td').text(num); 
 

 
\t }); 
 
});

#selction{list-style: none;} 
 
#selction li {display: inline-block;} 
 
#selction li a { 
 
    display: block; 
 
    width: 20px; 
 
    height: 20px; 
 
    line-height: 20px; 
 
    margin: 5px; 
 
    text-align: center; 
 
    background: red; 
 
    cursor: pointer 
 
} 
 
.table-numbers {width: 100%;border-collapse: seprate;} 
 
.table-numbers tr td { 
 
    width: 30%; 
 
    height: 30px; 
 
    border: 1px solid #000; 
 
}

<div class="number-list"> 
 
    <ul id="selction"> 
 
     <li><a id="n1" data-id="n1" onclick="ButtonSelected('n1')" role="button">1</a></li> 
 
     <li><a id="n2" data-id="n2" onclick="ButtonSelected('n2')" role="button">2</a></li> 
 
     <li><a id="n3" data-id="n3" onclick="ButtonSelected('n3')" role="button">3</a></li> 
 
     <li><a id="n4" data-id="n4" onclick="ButtonSelected('n4')" role="button">4</a></li> 
 
       
 
    </ul> 
 
    <div class="clearfix"></div> 
 
</div> 
 
<table class="table-numbers"> 
 
    <tr> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    </tr> 
 
    <tr> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    </tr> 
 
</table>

Answer 1

私は私がここに示唆かわからないんだけど、あなたが何をしたいです...あなたの質問は本当に明確ではないので。

しかし、私はテーブルの最初の空のセルにクリックされたリンクのテキストを追加するとします。

$(document).ready(function() { 
 
    var num; 
 
    
 
    $('#selction li a').click(function() { 
 
     num = $(this).text(); 
 
     var emptyTDFound=false; 
 
     $('td').each(function(){ 
 
      
 
      if($(this).text()=="" && !emptyTDFound){ 
 
       $(this).text(num); 
 
       emptyTDFound=true; 
 
      } 
 
     }); 
 
    }); 
 
});

#selction{list-style: none;} 
 
#selction li {display: inline-block;} 
 
#selction li a { 
 
    display: block; 
 
    width: 20px; 
 
    height: 20px; 
 
    line-height: 20px; 
 
    margin: 5px; 
 
    text-align: center; 
 
    background: red; 
 
    cursor: pointer 
 
} 
 
.table-numbers {width: 100%;border-collapse: seprate;} 
 
.table-numbers tr td { 
 
    width: 30%; 
 
    height: 30px; 
 
    border: 1px solid #000; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<div class="number-list"> 
 
    <ul id="selction"> 
 
     <li><a id="n1" data-id="n1" role="button">1</a></li> 
 
     <li><a id="n2" data-id="n2" role="button">2</a></li> 
 
     <li><a id="n3" data-id="n3" role="button">3</a></li> 
 
     <li><a id="n4" data-id="n4" role="button">4</a></li> 
 
       
 
    </ul> 
 
    <div class="clearfix"></div> 
 
</div> 
 
<table class="table-numbers"> 
 
    <tr> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    </tr> 
 
    <tr> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    </tr> 
 
</table>