Динамическое обнаружение и редактирование ячейки таблицы с использованием Javascript

Question

Привет, У меня много проблем, пытаясь выяснить, как динамически знать, где можно переписать данные в таблицу после того, как пользователь сделал редактирование. Сначала я покажу вам код таблицы, а затем, где бы я хотел, чтобы мои данные были введены. Спасибо за ваше время!

Таблица

<div id="table"> 
<br/> 
<table cellpadding="0" cellspacing="0" border="0" class="display" id="results_table" width="1140"> 
    <thead> 
     <tr> 
      <th>ID</th> 
      <th>PM Approval</th> <!-- date --> 
      <th>Junk Number</th> 
      <th>Project Title</th> 
      <th>Project Contact</th> 
      <th>Junk</th> 
      <th>Verified By</th> 
      <th>Date Verified</th> 
      <th>Comments</th> 
      <th>Notes</th> 
     </tr> 
    </thead> 
    <tbody> 
<?php 
    foreach($table_data as $row) 
    { 
     $open = false; 
     if(isset($row['Status']) == "Open") 
     { 
      $open = true; 
     } 

     if($open) 
     { 
?> 
    <tr class="gradeA"> 
<?php 
     } 
     else 
     { 
?> 
    <tr class="gradeX"> 
<?php 
     } 
?> 
      <td> 
      <!-- popup windows and such --> 
      <button onClick="openPopup(<?php echo $row['ID'];?>);"><?php echo $row['ID'];?></button> 
      </td> 

      <?php $idt = $row['ID']?> 
      <td><?php echo $row['SiteID'];?></td> 
      <td><?php echo $row['SiteName'];?></td> 
      <td> 

       <?php 
        $db = get_db_connection('swcrc'); 
        $db->connect(); 
        $getID = $row['SiteTypeID']; 
        $query = "SELECT [Descr] FROM dbo.tblLkpSiteType WHERE dbo.tblLkpSiteType.ID = '$getID'"; 
        $db->query($query); 
        $r = $db->fetch(); 
       ?> 
       <?php       
        echo $r['Descr']; 
       ?> 

      </td> 
      <td><?php echo date('m/d/y', strtotime($row['UpdatedDate']));?></td> 
      <td><?php 
        $db = get_db_connection('swcrc'); 
        $db->connect(); 
        $getID = $row['LTESID']; 
        $query = "SELECT [Descr] FROM dbo.tblLkpLTESType WHERE dbo.tblLkpLTESType.ID = '$getID'"; 
        $db->query($query); 
        $r = $db->fetch();        
        echo $r['Descr']; 
       ?> 
      </td> 
      <td><?php 
        if($row['OperationalAreaID'] != ''){ 
         $db = get_db_connection('swcrc'); 
         $db->connect(); 
         $getID = $row['OperationalAreaID']; 
         $query = "SELECT [Descr] FROM dbo.tblLkpOperationalAreas WHERE dbo.tblLkpOperationalAreas.ID = '$getID'"; 
         $db->query($query); 
         $r = $db->fetch();        
         echo $r['Descr']; 
        }else {echo $row['OperationalAreaID'];} 
       ?> 
      </td> 
      <td> 
      Data Verified 
      </td> 
      <td> 
      Comments 
      </td> 
      <td> 
      C 
      </td> 
     </tr> 
<?php 
    } 
?> 
    </tbody> 
    <tfoot> 

    </tfoot> 
</table> 

Так что на данный момент, если пользователь нажимает на кнопку ID номер, то как бы я использовать JavaScript для определения х и у координаты ячейки, а затем обновить эти клетки с соответствующими данными ?

Javascript функция

<script> 
function updateTable() 
{ 
    document.getElementById("testLand").innerHTML = "Post Json"; 

    //echo new table values in row where ID = button click 
} 

openPopup сценарий

<script> 
function openPopup(id) { 
    document.getElementById('draggable').style.display = 'block'; 
    if (true) console.log("This element is draggable!"); 
    if (false) console.log("This element failed at being draggable!"); 
    document.getElementById('popupID').innerHTML = id; 
} 
</script 

Answer 1

Вы не показываете нам достаточно коды, чтобы помочь с вашим конкретным (где openPopup()?), но вот общий ответ. Вы нацеливаете строку контекстно из ячейки, которая была нажата. Это можно сделать из объекта события, созданного при нажатии.

Предположим простую таблицу:

<table id='myTable'> 
    <tr> 
     <td><button>click me</button></td> 
     <td>content cell</td> 
    </tr> 
    <!-- etc --> 
</table> 

Мы слушаем за клики (только давайте делать это централизованно, из сценария, а не с инлайн onclick, как вы в настоящее время):

//listen for clicks 
document.querySelector('#myTable').addEventListener('click', function(evt) { 

    //ignore unless it came from a button 
    if (evt.target.tagName != 'BUTTON') return; 

    //ask user for content - here I use native prompt() but you may have 
    //a lightbox dialog script 
    var new_content = prompt('Please enter some content', ''); 

    //update the content cell of the clicked row - we know it's the next 
    //child of the clicked cell 
    evt.target.parentNode.parentNode.children[1].innerHTML = new_content; 

}, false);