使用 Javascript 动态查找和编辑表格单元格
Dynamically Finding and Editing a Table Cell using Javascript
嗨,我在尝试弄清楚如何在用户进行编辑后动态知道将数据重写到表中的位置时遇到了很多麻烦。首先,我将向您展示表代码,然后我希望在哪里查看输入的数据。谢谢你的时间!
桌子
<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
}
打开弹出脚本
<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
您没有向我们展示足够的代码来帮助解决您的特定问题(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);
相关文章:
- 如何使用编辑按钮启用表格行中的所有输入
- 使用HTML / Javascript将Web应用程序生成的图表/表格转换和导出到可编辑的Powerpoint(.ppt
- 如何更改编辑单元格上方单元格的背景颜色(Javascript、Google电子表格)
- 提交带有鸟舍编辑图像的表格
- 如何在可编辑内容中模糊表格单元格
- 如何将编辑后的表格数据保存在PHP的CSV文件中
- 使用 Javascript 动态查找和编辑表格单元格
- 检查日期并使用谷歌脚本编辑谷歌表格中的相邻单元格
- 在 html 中制作可编辑的表格时,是否最好将表格内容保留在数组中
- 在 Google 电子表格数据库中以编程方式监视编辑
- 如果我们在表格标题中有可编辑的文本,选项卡功能将无法正常工作
- 单击按钮以编辑表格标题
- 谷歌表格编辑功能
- 将可编辑的表格与 HighChart 结合使用,并让图表随更改而刷新
- 具有表格生成功能的任何标记语言的编辑器
- 如何将HTML表格单元格制作成可编辑的文本框
- 使用按钮编辑表格行
- 如何在TinyMCE表格编辑器的下拉菜单中添加类
- Tinymce编辑器删除所有样式,但保留项目符号和表格,同时粘贴文本
- Jquery可编辑表格:如何使某些单元格可编辑