使用 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 来确定单元格的 x 和 y 坐标，然后使用相应的数据更新这些单元格？

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);