Jquery - 前の列に左または右の列を追加

Question

"Add Column Left"と "Add Column Right"という2つのボタンがあります。私はクリックされたセルのインデックスを取得する必要がありますので、私は列インデックスを取得し、新しい列を前のインデックスに追加できます。

私の現在のコード：

function AddColumn(addLeft){ // Which button is clicked? Add Left || Add Right 

    var header = $('#tableHeader'); // Get the table header element 
    var headerContentToAppend = "<th>Header</th>"; // The default text of the new header 
    var table = $('#tableBody'); // Get the table body element 
    var rowContentToAppend = "<td>Content</td>"; // The default text of the new cells 

    // issue 1: missing index of the clicked/focussed column 

    if (addLeft) { // Button "Add Column Left" clicked 
    header.prepend(headerContentToAppend); // Add the Column to the left of the previous column 
    } 
    else { // Button "Add Column Right" clicked 
    header.append(headerContentToAppend); // Add the Column to the right of the previous column 
    } 

    $('table th').last().attr("contenteditable", true).focus(); // set all cells editable and focus the last one 
    table.find("tr").each(function() { // Get all existing rows .... 

     // issue 2: maybe the cells don't match to the right column, I have to test this after finishing the first issue 

      $(this).append(rowContentToAppend); // ... and add cells to the new column 
     }); 
} 

だから私の問題は、クリックされた列の右のインデックスを取得することです。新しい列を追加した後、私はそれを新しいセルで埋める必要があります。

「issue」という2つのコメントをコードに挿入しました。これは明確にする必要があります。

私のHTMLコード：

<table id="dataTable"> 
    <thead id="tableHeader"> 
    </thead> 
    <tbody id="tableBody"> 
    </tbody> 
    </table> 

私は、動的にそれを維持するためのJavascriptでテーブルを制御したいです。

Answer 1

あなたはjQueryのを使用しているので、あなたは、要素のインデックスを取得する方法index()を使用することができます。

var index = $(this).closest('tr').find('td').index($(this)); 

は、この情報がお役に立てば幸いです。

var index = 0; 
 

 
function AddColumn(addLeft){ 
 
    var header = $('#tableHeader'); 
 
    var headerContentToAppend = "<th>Header</th>"; 
 
    var table = $('#tableBody'); 
 
    var rowContentToAppend = "<td>Content</td>"; 
 

 
    if (addLeft) 
 
    header.find('th').eq(index).before(headerContentToAppend); 
 
    else 
 
    header.find('th').eq(index).after(headerContentToAppend); 
 

 
    $('table th').attr("contenteditable", true).last().focus(); 
 

 
    table.find("tr").each(function() { 
 
    if (addLeft) 
 
     $(this).find('td').eq(index).before(rowContentToAppend); 
 
    else 
 
     $(this).find('td').eq(index).after(rowContentToAppend); 
 
    }); 
 
    
 
    $('td').removeClass('selected'); 
 
} 
 

 
$('body').on('click','td',function(){ 
 
    $('td').removeClass('selected'); 
 
    $(this).addClass('selected'); 
 

 
    index = $(this).closest('tr').find('td').index($(this)); 
 
});

.selected{ 
 
    background-color: grey; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table border="1"> 
 
    <thead id='tableHeader'> 
 
    <th>Header 1</th> 
 
    <th>Header 2</th> 
 
    <th>Header 3</th> 
 
    </thead> 
 
    <tbody id='tableBody'> 
 
    <tr> 
 
     <td>column 1</td> 
 
     <td>column 2</td> 
 
     <td>column 3</td> 
 
    </tr> 
 
    <tr> 
 
     <td>column 11</td> 
 
     <td>column 22</td> 
 
     <td>column 33</td> 
 
    </tr> 
 
    <tr> 
 
     <td>column 111</td> 
 
     <td>column 222</td> 
 
     <td>column 333</td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 
<br> 
 
<button onClick='AddColumn(true)'>&lt; Add to the Left</button> 
 
<button onClick='AddColumn(false)'>Add to the Right &gt;</button>