如何使用javascript向现有html表单添加一行输入框
我有一个表单,显示数据库表中的行,每行有一个更新按钮 我需要使用JavaScript在一个按钮点击(添加条目)上添加一个空行,就像上面表单中的那个一样,并在这一行上添加一个保存按钮(更新按钮) 下面是我正在使用的HTML和JS。以下是我的页面的外观:如何使用javascript向现有html表单添加一行输入框,javascript,html,Javascript,Html,我有一个表单,显示数据库表中的行,每行有一个更新按钮 我需要使用JavaScript在一个按钮点击(添加条目)上添加一个空行,就像上面表单中的那个一样,并在这一行上添加一个保存按钮(更新按钮) 下面是我正在使用的HTML和JS。以下是我的页面的外观: 编写sql查询以向表中添加数据。然后执行sql查询 例子: $SQL=“插入到表_name(列_name1,列_name2…)中的值(“$val1”,“$val2”)”; $exeSQL=mysql\u query($SQL)或die(mysql\
编写sql查询以向表中添加数据。然后执行sql查询
例子:
$SQL=“插入到表_name(列_name1,列_name2…)中的值(“$val1”,“$val2”)”;
$exeSQL=mysql\u query($SQL)或die(mysql\u error())
$(文档).ready(函数(){
$('a')。单击(函数(){
$(“#myTable tbody”).append('但我需要的是输入文本框,用户将在创建行后在其中输入数据。因此,您创建文本框并为每个框指定一个id,对吗?您只需将该id放入“值”中即可按顺序用括号括起来。因此,行是通过获取用户的输入来创建的。第一个代码段中的ready函数是php代码吗?我应该将它写在哪里?在脚本中?将此脚本添加到代码下面,将id
赋予tablemyTable
并在按钮上调用javascript函数
。我们为什么要创建此表给它赋值,创建的行应该是空的文本框。同样在你的函数中,#mytable注释了我的代码。这方面有什么变化吗?不需要创建新表gibe你的表id=mytable
,并且#mytable
不能注释你的代码你犯了一些错误请比较我的代码你的代码。没有人我要花很长时间才能明白你想让我做什么
<?php
include('adodb/adodb.inc.php');
echo '<h1>Mxpresso Revenue Management Solution</h1>';
echo '<img src="http://mxpresso.com/images/logo.png" alt="mxpresso logo" style="width:171px;height:108px;">';
echo '<h2>See existing records</h2>';
$db=NewADOConnection('mysql');$db->Connect("127.0.0.1", "vc", "abc", "vc");
$sql="select * from rev";
$result = $db->Execute($sql);
if ($result === false) die("failed2");
$records=array();
$count=$result->RecordCount();
echo "Total Records Found :".$count."<br>";
if($count > 0) {
echo '<style>
input{
outline:none;
border: none;
}
</style>
<table id="datatable" class="form" border="1" width="50%">
<col width="10%">
<col width="10%">
<col width="10%">
<col width="10%">
<col width="10%">
<tbody>
<tr>
<th><h4>OfferID</h4></th>
<th><h4>AffID</h4></th>
<th><h4>Deduction</h4></th>
<th><h4>Status</h4></th>
<th><h4>Update Entry</h4></th>
</tr>';
while (!$result->EOF){
$offerId=$result->fields[0];
$affId=$result->fields[1];
$status=$result->fields[2];
$deduction=$result->fields[3];
echo'<form target="_blank" action ="updatecopy.php" id="myform" method="get">
<tr>
<td><input type="text" name="update_for_offerid" value='.$offerId.'></td>
<td><input type="text" name="update_for_affid" value='.$affId.'></td>
<td><input type="text" name="deduct" value='.$deduction.'></td>
<td><input type="text" name="status" value='.$status.' ></td>
<td><input type="submit" size="23" value="Update Entry" style="color : Black;width:165px"></td>
</tr>
</form>';
$rec=array("offerId"=>$offerId,"affiliate_id"=>$affId,"status"=>$status, "deduction"=>$deduction);
array_push($records,$rec);
$result->MoveNext();
}
}
echo '</tbody>
</table>
<div id="dynamicinput1">
</div>
<form><input type="button" value="Add Entry" style="font-family: sans-serif; font-size: 15px; color : Black;" onClick="addInput(\'dynamicinput1\');">
</form>
<script language="Javascript" type="text/javascript">
var counter = 1;
var limit = 10;
function addInput(divName){
if (counter == limit) {
alert("You have reached the limit of adding " + counter + " inputs");
}
else {
var fool = document.createElement(\'form\');
var newtable = document.createElement(\'Table\');
var tr = document.createElement(\'tr\');
newtable.style.border = "1px solid black";
tr.style.width="10px";
var td1 = document.createElement(\'td\');
td1.innerHTML = "<br><input type=\'text\' name=\'offerId\'>";
td1.style.border = "1px solid black";
var td2 = document.createElement(\'td\');
td2.innerHTML ="<br><input type=\'text\' name=\'affId\'>";
td2.style.border = "1px solid black";
var td3 = document.createElement(\'td\');
td3.innerHTML ="<br><input type=\'text\' name=\'status\'>";
td3.style.border = "1px solid black";
var td4 = document.createElement(\'td\');
td4.innerHTML ="<br><input type=\'text\' name=\'deduct\'>";
td4.style.border = "1px solid black";
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
tr.appendChild(td4);
newtable.appendChild(tr);
fool.appendChild(newtable);
fool.action = "insertcopy.php"
var save = document.createElement(\'input\');
save.type = "submit";
save.value = "Save Entry";
fool.appendChild(save);
tr.appendchild(save);
document.getElementById(divName).appendChild(fool);
counter++;
}
}
</script>';
?>
It may help you.