添加表格tr

<script language="javascript">
 //添加行
 function addRow(){

  
   var tr=document.createElement("tr");
 
  var button=document.createElement("input");
  button.type="button";
  button.value="删除";
 
   button.onclick = function()
 {
  document.getElementById("newbody").removeChild(tr);
  
 }

    var td=document.createElement("td");
  var td1=document.createElement("td");
  var td2=document.createElement("td");
  var td3=document.createElement("td");
   var td4=document.createElement("td");
    
 var input1 = document.createElement("input");
 input1.type = "text";

 var input2 = document.createElement("input");
 input2.type = "text";
 var span1=document.createElement("span");
 span1.innerHTML="质子强度"
  var span2=document.createElement("span");
 span2.innerHTML="质子质量"
 
 
 td.appendChild(input1);
 td1.appendChild(span1);
 td2.appendChild(span2);
 td3.appendChild(input2);
 td4.appendChild(button);
 tr.appendChild(td1);
 tr.appendChild(td);
 tr.appendChild(td2);
 tr.appendChild(td3);
  tr.appendChild(td4);
  

  document.getElementById("newbody").appendChild(tr); 
 
 }
</script>

 

 

<body >

 <table  id="table" align="center"> 
     <tbody id="newbody"></tbody> 
 
 </table>
 
 <input type="button" id="addRow" name="addRow" onClick="addRow();" value="添加行"/>
</body>

要在HTML表格的一个`<tr>`(行)中动态添加另一个表格,你可以使用JavaScript动态创建新的表格元素,并将其添加到目标行中。以下是一个示代码: ```html <!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <table id="main-table"> <thead> <tr> <th>Name</th> <th>Age</th> </tr> </thead> <tbody> <tr id="target-row"> <td>John</td> <td>25</td> </tr> </tbody> </table> <button id="add-table-btn">Add Table</button> <script> $(document).ready(function() { // 添加表格 $('#add-table-btn').click(function() { var newTable = $('<table>'); // 创建一个新的表格 // 创建新的表格行和单元格 var newRow1 = $('<tr>'); newRow1.append($('<td>').text('Cell 1')); newRow1.append($('<td>').text('Cell 2')); var newRow2 = $('<tr>'); newRow2.append($('<td>').text('Cell 3')); newRow2.append($('<td>').text('Cell 4')); // 将新的表格添加到新表格中 newTable.append(newRow1); newTable.append(newRow2); // 将新表格添加到目标行中 $('#target-row').append($('<td>').append(newTable)); }); }); </script> </body> </html> ``` 在上述示中,我们首先定义了一个包含目标行的表格。然后,我们在页面上添加了一个按钮,当点击该按钮时,会通过jQuery动态创建一个新的表格,并将其添加到目标行的一个单元格中。 通过点击 "Add Table" 按钮,你将看到新的表格添加到目标行中。你可以根据需要修改代码以满足你的具体需求。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值