如何在html表格中添加动态行？
Posted
技术标签:
【中文标题】如何在html表格中添加动态行？【英文标题】：How to add dynamic rows in html table? 【发布时间】：2012-02-11 12:47:09 【问题描述】：这是我的第一篇文章，我是 php 新手，我正在尝试使用 PHP 构建一个 POS 系统，但我卡在了销售模块中。
问题是当我扫描一个项目的条形码时，它显示在我设置焦点的文本框中，当我单击添加项目按钮但当我对另一个项目重复此步骤时，它会删除第一个项目并替换它对于最新的项目，我已经投入了 100% 但无法弄清楚为什么会发生这种情况，这就是为什么请在这方面帮助我，因为我知道这个论坛中有很多优秀的 php 开发人员。
这是我给你的代码：
<script type="text/javascript">
function setFocus()
document.getElementById("searchitem").focus();
function change()
var searchitem = document.getElementById('searchitem');
if(searchitem.value == '')
searchitem.style.background = 'orange';
else
searchitem.style.background = '';
</script>
<?php $name = "Mehroz"; ?>
<SCRIPT language="javascript">
/* setInterval("SANAjax();",5000);
$(function()
SANAjax = function()
$('#dataDisplay').prepend("HI This").fadeIn("slow");
) ; */
function addRow(tableID)
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "checkbox";
cell1.appendChild(element1);
var cell2 = row.insertCell(1);
cell2.innerhtml = rowCount + 0;
var cell3 = row.insertCell(2);
var element2 = document.createElement("input");
element2.type = "text";
element2.value = '<?php echo $name;?>';
element2.size = "15";
cell3.appendChild(element2);
var cell4 = row.insertCell(3);
var element3 = document.createElement("input");
element3.type = "text";
element3.size = "25";
element3.disabled = "disabled";
cell4.appendChild(element3);
var cell5 = row.insertCell(4);
var element4 = document.createElement("input");
element4.type = "text";
element4.size = "3";
element4.disabled = "disabled";
cell5.appendChild(element4);
var cell6 = row.insertCell(5);
var element5 = document.createElement("input");
element5.type = "text";
element5.size = "3";
element5.disabled = "disabled";
cell6.appendChild(element5);
var cell7 = row.insertCell(6);
var element6 = document.createElement("input");
element6.type = "text";
element6.size = "5";
cell7.appendChild(element6);
var cell8 = row.insertCell(7);
var element7 = document.createElement("input");
element7.type = "text";
element7.size = "5";
cell8.appendChild(element7);
var cell9 = row.insertCell(8);
var element8 = document.createElement("input");
element8.type = "text";
element8.size = "10";
cell9.appendChild(element8);
var cell10 = row.insertCell(9);
var element9 = document.createElement("input");
element9.type = "submit";
element9.value = "Update";
cell10.appendChild(element9);
function deleteRow(tableID)
try
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for(var i=0; i<rowCount; i++)
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if(null != chkbox && true == chkbox.checked)
table.deleteRow(i);
rowCount--;
i--;
catch(e)
alert(e);
</SCRIPT>
<script src="menuscript.js" language="javascript" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="menustyle.css" media="screen, print" />
</head>
<body onload="setFocus();change();">
<div class="left">
<form action="javascript:addRow('dataTable')" method="POST">
<input id="searchitem" name="add" type="text" onkeyup="change()" size="75" onclick="javascript:addRow('dataTable')"></input></td><td colspan="2">
<input type="submit" value="New Item" name="search">
<input type="button" value="Delete Row" onclick="deleteRow('dataTable')" /></form>
</br>
<table id="dataTable">
<tr bgcolor="97c950">
<b>
<td align="center" ></td>
<td align="center" >S#</td>
<td align="center" >Barcode</td>
<td align="center" >Item Name</td>
<td align="center" >Stock</td>
<td align="center" >Qty</td>
<td align="center" >Price</td>
<td align="center" >Disc.Rs.</td>
<!-- <td align="center" >Disc.%</td> -->
<td align="center" >Total</td>
<td align="center" ></td></tr>
<!-- <form action="javascript:addRow('dataTable')" method="POST">
<INPUT type="text" name="add" value=""/>
<INPUT type="submit" value="Add Row" name="search" />
</form> -->
<TR>
<TD><INPUT type="checkbox" name="chk" /></TD>
<TD> 1 </TD>
<TD> <INPUT type="textbox" size="15" /> </TD>
<TD> <INPUT type="textbox" size="25" disabled="disabled" /> </TD>
<TD> <INPUT type="textbox" size="3" disabled="disabled"/> </TD>
<TD> <INPUT type="textbox" size="3" disabled="disabled"/> </TD>
<TD> <INPUT type="textbox" size="5" /> </TD>
<TD> <INPUT type="textbox" size="5" /> </TD>
<TD> <INPUT type="textbox" size="10" /> </TD>
<TD> <INPUT type="submit" value="Update" /> </TD>
</TR>
</form>
</table>
</div>
【问题讨论】：
PHP 部分在哪里？ （我怀疑除了“我只是想学习 PHP，而我的 [基于教程的] 代码不起作用”之外，还有其他事情发生。有关该项目背景的任何其他信息都会很有用。） 您给我们的代码有点太长，请将您的问题缩小到代码的特定部分。 亲爱的，我的问题是我想从mysql向html表添加行，我不能这样做，请在这方面帮助我并忽略上面的代码，我喜欢按照代码你告诉我的。 好的，我需要知道这里发生了什么。你真的得到了裸码（如条形码的数字表示）？然后你也反对使用 jQuery 吗？ jquery.com 如果没有，那么我可能有一些您可以使用的代码。 【参考方案1】：长话短说，这是代码（如果我理解正确的话）：
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function()
$("#searchitem").focus().filter('input[value!=""]').addClass("orange");
);
</script>
<style type="text/css">
.orange
background-color: orange;
table#dataTable
empty-cells : show;
table#dataTable th
text-align : center;
background-color: #97C950;
.saved
background-color: green;
</style>
</head>
<body>
<form action="" method="POST" onSubmit="">
<input id="searchitem" type="text" size="75" value="" >
<input type="submit" name="search" value="New Item" >
<input id="deleteRow" type="button" value="Delete Row" >
</form>
<table style="width:98%;" id="dataTable">
<tr>
<th colspan="2" style="width:5%;">S#</th>
<th style="width:15%;">Barcode</th>
<th style="width:27%;">Item Name</th>
<th style="width:4%;">Stock</th>
<th style="width:4%;">Qty</th>
<th style="width:6%;">Price</th>
<th style="width:6%;">Disc.Rs.</th>
<th style="width:10%;">Total</th>
</tr>
</table>
<script type="text/javascript">
$('#searchitem').change(function()
var t = $('#dataTable');
t.append('<tr> \
<td><input type="checkbox"></td> \
<td>'+t.find('tr').length+'</td> \
<td><input size="15" type="text" value="'+$(this).val()+'"></td> \
<td><input size="25" type="text" value=""></td> \
<td><input size="3" type="text" value=""></td> \
<td><input size="3" type="text" value=""></td> \
<td><input size="5" type="text" value=""></td> \
<td><input size="10" type="text" value=""></td> \
<td><input size="15" type="text" value=""></td> \
<td><input type="button" value="Update" onClick="saveItem(event);"></td> \
</tr>');
);
function saveItem(ev)
// here read all rows from that row, send them via AJAX to the server to be saved
// you get the current row by looking at ev.currentTarget, something like this in Firefox
var args = [];
$(ev.currentTarget).parents('tr:first').find('input[type="text"]').each(function() args.push( $(this).val() ); );
$.post(
'saveItem.php',
args,
function() $(ev.currentTarget).addClass('saved'); /* this is triggered onSucces */
);
</script>
</body>
</html>
说来话长：
当您在 input#searchitem 中键入内容时，您需要在表格中插入一个新行 您尚未将其保存在数据库中，首先插入其他列（数量、价格等...） 他们点击更新按钮，新行将插入数据库中，如果一切正常，按钮将显示为“绿色”这段代码是为了给你一个线索，并把你推向正确的方向（这就像一个概念证明），所以这里有更多的建议（很难给出，因为我仍然不明白你到底想做什么实现）： 全球：
不要只是复制/粘贴此代码，尝试理解它，然后根据自己的需要进行更改CSS：
使用外部样式表 为表格设置固定列宽Javascript：
检查条形码是否存在，突出显示该行，如果不可见则将其推入可见区域（或显示一个带有“还有5个隐藏行的框），您可以为输入命名，例如名称=条形码... 使用 args 数组中的这些名称来创建命名数组。希望这会对您有所帮助。
【讨论】：
以上是关于如何在html表格中添加动态行？的主要内容，如果未能解决你的问题，请参考以下文章