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

使用Javascript动态查找和编辑表格单元格

1 个答案: