Javascript 更改按钮在屏幕中的位置

Question

正在尝试更改一行中动态生成的列的位置

需要把删除按钮的位置改到最后。

在左端删除的工作脚本

<HTML>    
     <HEAD> 
          <SCRIPT>  
               function addRow(tableID) {  
        var table = document.getElementById(tableID);  
        var rowCount = table.rows.length;  
        var row = table.insertRow(rowCount);  
        //Column 1  
        var cell1 = row.insertCell(0);  
        var element1 = document.createElement("input");  
        element1.type = "button";  
        var btnName = "button" + (rowCount + 1);  
        element1.name = btnName;  
        element1.setAttribute('value', 'Delete'); // or element1.value = "button";  
        element1.onclick = function () { removeRow(btnName); }  ;
        cell1.appendChild(element1);  
        //Column 2    
        var cell2 = row.insertCell(1);  
        cell2.innerHTML = rowCount + 1;  
        //Column 3  
        var cell3 = row.insertCell(2);  
        var element3 = document.createElement("input");  
        element3.type = "text";  
        cell3.appendChild(element3);  
    }  
    function removeRow(btnName) {  
        try {  
            var table = document.getElementById('dataTable');  
            var rowCount = table.rows.length;  
            for (var i = 0; i < rowCount; i++) {  
                var row = table.rows[i];  
                var rowObj = row.cells[0].childNodes[0];  
                if (rowObj.name === btnName) {  
                    table.deleteRow(i);  
                    rowCount--;  
                }  
            }  
        }  
        catch (e) {  
            alert(e);  
        }  
    }  
</SCRIPT>     
   </head>
<body>
          <INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />  
          <TABLE id="dataTable" width="350px" border="1">  
               <TR>  
                    <TD><input type="button" name="button1" value="Delete" onclick="removeRow('button1')"></TD>  
                    <TD>1</TD>  
                    <TD><input type="text" value="" name="nameTxt"></TD>  
               </TR>  
          </TABLE>  
     </BODY>    
</HTML>

修改版本

<HTML>        
     <HEAD>
          <SCRIPT>  
               function addRow(tableID) {  
        var table = document.getElementById(tableID);  
        var rowCount = table.rows.length;  
        var row = table.insertRow(rowCount); 
        //Column 2    
        var cell1 = row.insertCell(0);  
        cell1.innerHTML = rowCount + 1;  
        //Column 3  
        var cell2 = row.insertCell(1);  
        var element2 = document.createElement("input");  
        element2.type = "text";  
        cell2.appendChild(element2); 
              //Column 1  
        var cell3 = row.insertCell(2);  
        var element3 = document.createElement("input"); 
        element3.type = "button";  
        var btnName = "button" + (rowCount + 1);  
        element3.name = btnName;  
        element3.setAttribute('value', 'Delete'); // or element1.value = "button";  
        element3.onclick = function () { removeRow(btnName); }  ;
        cell3.appendChild(element3);  
        alert(btnName);      
    }  
    function removeRow(btnName) {  
        try {  
            var table = document.getElementById('dataTable');  
            var rowCount = table.rows.length;  
            for (var i = 0; i < rowCount; i++) {  
                var row = table.rows[i];  
                var rowObj = row.cells[2].childNodes[2];  
                if (rowObj.name === btnName) {  
                    table.deleteRow(i);  
                    rowCount--;  
                }  
            }  
        }  
        catch (e) {  
            alert(e);  
        } 
           alert(btnName);
    } 
</SCRIPT>  
     </HEAD>      
           <BODY>  
         <form action="AddnewcustProgram.jsp">                
          <TABLE id="dataTable">  
               <TR>                           
                    <TD>1</TD>  
                    <TD><input type="text" value="" name="nameTxt"></TD>  
                    <TD><input type="button" name="button1" value="Delete" onclick="removeRow('button1')"></TD>                         
               </TR>                </TABLE>                 
             <table>                     
                 <tr>
                     <td>
                         <INPUT type="button" value="Add Row" onclick="addRow('dataTable')" /></td>
                     <td>
                 <input type="submit"  value="Execute" >
                     </td>                 
          </tr>
            </table>
         </form>
     </BODY>        
</HTML>

尝试像上面那样修改脚本。但是单击它时删除不起作用。如果需要任何进一步的详细信息，请告诉我。非常感谢您的支持。

Answer 1

改变这个

var rowObj = row.cells[2].childNodes[2];

至此

var rowObj = row.cells[2].childNodes[0];

Javascript 更改按钮在屏幕中的位置

Javascript changing position of button in screen

javascript

dynamic