用JS在表格中的当前行下新增新的一行

雨点打透心脏的1/2处 2022-01-26 04:13 557阅读 0赞

1：先在HTML中设计一个表格，给这个表格设置ID，方便等下在JS中获取这个表格，为了方便简单，这里就只设计一行数据了，给这个行也设置一个ID，然后再弄一些数据  
HTML表格设计代码截图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MzEzMQ_size_16_color_FFFFFF_t_70]  
2：现在再去JS中写一个方法，给这个方法取一个名称并传递一个参数，比如：“function zjff1(rowIndex)”，接下来就是在这个方法里面写代码：先通过ID获取到刚刚设计的那个表格，并变量它，然后再变量获取10个td，因为这个表格中有10个，给这10个td的HTML赋值，比如“《111》”，每个都需要赋值，再“var xtr=table.insertRow(rowIndex)”，把刚刚的每一个td都添加进去  
JS方法代码：  
function zjff1(rowIndex)\{  
var table=document.getElementById(“table”);  
var xg1=document.createElement(“td”);  
var xg2=document.createElement(“td”);  
var xg3=document.createElement(“td”);  
var xg4=document.createElement(“td”);  
var xg5=document.createElement(“td”);  
var xg6=document.createElement(“td”);  
var xg7=document.createElement(“td”);  
var xg8=document.createElement(“td”);  
var xg9=document.createElement(“td”);  
var xg10=document.createElement(“td”);  
xg1.innerHTML="《111》";  
xg2.innerHTML="《222》";  
xg3.innerHTML="《333》";  
xg4.innerHTML="《444》";  
xg5.innerHTML="《555》";  
xg6.innerHTML="《666》";  
xg7.innerHTML="《777》";  
xg8.innerHTML="《888》";  
xg9.innerHTML="《999》";  
xg10.innerHTML=’*–删除–*’;  
var xtr=table.insertRow(rowIndex);  
xtr.appendChild(xg1);  
xtr.appendChild(xg2);  
xtr.appendChild(xg3);  
xtr.appendChild(xg4);  
xtr.appendChild(xg5);  
xtr.appendChild(xg6);  
xtr.appendChild(xg7);  
xtr.appendChild(xg8);  
xtr.appendChild(xg9);  
xtr.appendChild(xg10);  
\}  
3：在页面加载事件中获取那个行上面的ID为“zjnr1”，然后给这个ID一个点击事件，再在点击事件中获取ID为“one”的Index加上1，再调用刚刚那个方法，然后就OK了  
点击事件截图：  
![在这里插入图片描述][20190528075907967.PNG]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MzEzMQ_size_16_color_FFFFFF_t_70]: /images/20220126/ab9f7b91488046e4b38d931484962e42.png
[20190528075907967.PNG]: /images/20220126/36d3cf23d8194c209ef533bb7d34b42b.png