jQuery를 사용하여 테이블에 셀을 추가하는 방법

Question

버튼을 사용하여 jQuery를 사용하여 테이블에 열과 행을 추가하려고합니다. 행을 추가 할 때 테이블이 두 개의 열이더라도 하나의 셀만 포함하고 테이블에 열을 추가하면 여전히 셀이 하나 인 행이 생깁니다.

$(document).ready(function(){ 
var table = $('table tbody'); 
var addrow = $('.add-row'); 
var addcolumn=$('.add-column'); 
var row = '<tr><td>cell</td>'; 
var selectrow=$('table tbody tr').last(); 
var column='<th>'; 
var numberofcolumns = $('th').length; 
var cell='<td>cell</td>'; 

addrow.click(function(){ 
    table.append(row); 
    for(i=0; i<numberofcolumns; i++) 
     { 
      selectrow.last().append(cell); 
     }; 
}); 

Answer 1

나는 도움이되는 몇 가지 코드가 있습니다.

var tbody = $('#tablelinks tbody'); 
 
$('#addRows').on('click', function() 
 
{ 
 
    var rowcount = ($('#tablelinks tr').children().length/4) +1; 
 
    //alert('There are ' + rowcount + ' rows in the table'); 
 

 
    tbody.append('<tr><td>' + rowcount + 'a</td><td>' + rowcount + 'b</td><td>' + rowcount + 'c</td><td>' + rowcount + 'd</td>'); 
 
    $('#tablelinks td').addClass("contents"); 
 

 
    modifyTable(); 
 
}); 
 

 
$('#removeRows').on('click', function() 
 
{ 
 
    $('#tablelinks tr:last').remove(); 
 
}); 
 

 
function modifyTable() 
 
{ 
 
    $('#tablelinks tr').on('mouseenter', function() { 
 
     $(this).css('background-color', 'white'); 
 
    }); 
 

 
    $('#tablelinks tr').on('mouseleave', function() { 
 
     $(this).css('background-color', 'transparent'); 
 
    }); 
 

 
    $('#tablelinks td').on('mouseenter', function() { 
 
     $(this).css('background-color', 'red'); 
 
     $(this).css('cursor', 'pointer'); 
 
    }); 
 

 
    $('#tablelinks td').on('mouseleave', function() { 
 
     $(this).css('background-color', 'transparent'); 
 
    }); 
 
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="divtablelinks" class="contents"> 
 
    Div_6: Fun with Table Rows and Table Cells 
 
    <br /> 
 
    <input id="addRows" type="button" value="Add TableRows" /> 
 
    <br /> 
 
    <input id="removeRows" type="button" value="Remove TableRows" /> 
 
    <br /> 
 
    <table id="tablelinks"> 
 
     <tr> 
 
      <td> 
 
       <a id="infolinks_1a" class="contents">1a</a> 
 
      </td> 
 
      <td> 
 
       <a id="infolinks_1b" class="contents">1b</a> 
 
      </td> 
 
      <td> 
 
       <a id="infolinks_1c" class="contents">1c</a> 
 
      </td> 
 
      <td> 
 
       <a id="infolinks_1d" class="contents">1d</a> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td> 
 
       <a id="infolinks_2a" class="contents">2a</a> 
 
      </td> 
 
      <td> 
 
       <a id="infolinks_2b" class="contents">2b</a> 
 
      </td> 
 
      <td> 
 
       <a id="infolinks_2c" class="contents">2c</a> 
 
      </td> 
 
      <td> 
 
       <a id="infolinks_2d" class="contents">2d</a> 
 
      </td> 
 
     </tr> 
 
    </table> 
 
</div>