Was das zeilenweise Hinzufügen von js zur Tabelle betrifft, habe ich mir heute die Zeit genommen, es zu klären: Erstellen Sie eine neue HTML-Datei (wenn Sie keinen Editor haben, können Sie eine demo.txt-Datei erstellen und diese dann ändern das Suffix zu demo.html) und fügen Sie alle folgenden Codes ein. Gehen Sie einfach hinein.
Zu den Funktionen gehören: Hinzufügen einer Zeile zur Tabelle, Löschen einer Zeile aus der Tabelle, Durchlaufen der Tabelle, um Werte abzurufen usw.
Klickanweisungen: Klicken Sie auf die Schaltfläche „Hinzufügen“, um der Tabelle eine Zeile zur Eingabe hinzuzufügen, und auf die Schaltfläche „Löschen“, um die aktuelle Zeile zu löschen, ohne dass sich dies auf andere Zeilen auswirkt. Löschen oder hinzufügen, die Nummer jeder Zeile ändert sich automatisch. Das Paket und der Preis sind
<textarea></textarea>,. Wenn Sie auf die Schaltfläche „Speichern“ klicken, werden alle Zeilen durchlaufen Zeilen in der Tabelle und speichern Sie alle Zeilen. Die Daten werden entnommen und in einem Popup-Fenster angezeigt, das bei Bedarf zur späteren Verarbeitung an den Hintergrund übergeben werden kann.
Rendering:
Quellcode:
<!--
Creator： WangPeng
CreateTime : 2018-01-25
去年今日此门中，人面桃花相映红。
人面不知何处去，桃花依旧笑春风。
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态增加表格</title>
</head>
<style>
td /*设置表格文字左右和上下居中对齐*/
{
vertical-align: middle;
text-align: center;
padding: 9px;
}
textarea{
min-height: 60px;
min-width: 200px;
}
</style>
<script type="text/javascript">
function del(obj){
if(document.getElementById('tbodyid').children.length>1){
var trid=obj.parentNode.parentNode.id;
var objtr=document.getElementById(trid);
document.getElementById('tbodyid').removeChild(objtr);
var tbody=document.getElementById('tbodyid');
var countchildren=tbody.childElementCount;
for (var i=0;i<countchildren;i++){
tbody.children[i].children[0].innerHTML=i+1;
}
}
else{
alert("请不要全部删除");
}
}
function add(){
var trid = new Date().getTime();
var packageid=trid+'packageid';
var countid=trid+'countid';
var priceid=trid+'priceid';
var objtr=document.createElement('tr');
objtr.id=trid;
objtr.innerHTML="<td></td> " +
" <td><input id='"+trid+"packageid'></td> " +
" <td><textarea id='"+trid+"countid'></textarea></td> " +
" <td><input id='"+trid+"priceid'></td> " +
" <td><button type='button' onclick='del(this)'>删除</button></td>";
document.getElementById("tbodyid").appendChild(objtr);
var tbodyobj=document.getElementById('tbodyid');
var countchildren=tbodyobj.childElementCount;
for (var i=0;i<countchildren;i++){
tbodyobj.children[i].children[0].innerHTML=i+1;
}
}
function save(){
var tbodyobj=document.getElementById('tbodyid');
var countchildren=tbodyobj.childElementCount;
var trid="";
var packageid="";
var countid="";
var priceid="";
var list=new Array();
for (var i=0;i<countchildren;i++){
trid=tbodyobj.children[i].id;
packageid=trid+"packageid";
countid=trid+"countid";
priceid=trid+"priceid";
var map={
"套餐":document.getElementById(packageid).value,
"内容":document.getElementById(countid).value,
"价格":document.getElementById(priceid).value
}
list.push(map);
}
console.log("list:",list);
alert(JSON.stringify(list));
}
</script>
<body>
<p>
<p style="width: 80%;margin: 10%">
<table border="1" bordercolor="#a0c6e5" style="border-collapse:collapse;" align="center" width="100%">
<caption>动态增加表格</caption>
<thead>
<tr>
<th width="5% ">序号</th>
<th width="20%">套餐</th>
<th width="30%">内容</th>
<th width="10%">价格</th>
<th width="10%">操作</th>
</tr>
</thead>
<tbody id="tbodyid">
<tr id="123">
<td>1</td>
<td><input id="123packageid"></td>
<td><textarea id="123countid"></textarea></td>
<td><input id="123priceid"></td>
<td><button type="button" onclick='del(this)'>删除</button></td>
</tr>
</tbody>
</table>
<button type="button" onclick='add()'>添加</button>
<button type="button" onclick='save()'>保存</button>
</p>
</p>
</body>
</html>js generiert dynamisch andere In der Auf die gleiche Weise können Sie die benötigten Elemente entsprechend Ihren Anforderungen am angegebenen Ort erstellen.
Verwandte Empfehlungen:
Beispiel für eine Methode zum dynamischen Hinzufügen von Formularelementen mithilfe von JavaScript
Das obige ist der detaillierte Inhalt vonjs fügt Werte dynamisch Zeile für Zeile hinzu, löscht sie und durchläuft sie. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
