使用 Java 脚本将新行添加到 HTML 表中时如何增加列答案

【问题标题】：How to Increment a column when adding new row into HTML Table using Java script使用 Java 脚本将新行添加到 HTML 表中时如何增加列
【发布时间】：2021-07-25 09:16:39
【问题描述】：

我的要求是使用 java 脚本向表中添加一个新的空白行，并根据前一行增加一列（其他列需要空白）。我尝试了很多方法，但无法弄清楚。下面是我正在使用的代码。当我第一次添加一行时它工作正常，但之后单元格值没有增加，还请帮助了解如何实现复制功能，为复制的每一行增加相同的单元格值。

有人可以帮忙解决一下吗？

<html>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script> 
<script src="https://ajax.googleapis.com/ajax/libs/cesiumjs/1.78/Build/Cesium/Cesium.js"></script>
<script type="text/javascript">

   function addRow(row){
                            var i = row.parentNode.parentNode.rowIndex;
                            var tr = document.getElementById('Table').insertRow(i+1);
                            tr.innerHTML = row.parentNode.parentNode.innerHTML;      
                            var currentShipUnit = tr.querySelector("input[name='ShipUnitId']").value;
                            console.log(currentShipUnit);

                            tr.querySelector("input[name='ShipUnitId']").value = ++currentShipUnit;
             

            }

</script>

<body>

<table id="Table" border="" class="w3-table-all">
                <thead>
                <tr class="w3-teal">
                    <th>BOX</th>
                    <th >NUMBERS</th>
                    <th >LENGTH</th>
                    <th >WIDTH</th>
                    <th >HEIGHT</th>
                    <th >WEIGHT</th>
                    <th >LEGNTH UOM</th>
                    <th >WEIGHT UOM</th>
                    <th>FEATURES</th>
                    <th></th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td><input size=10 type="text" readonly=True name="ShipUnitId" value='100'></td>                  
                    <td>
                        <select id="palletgid" name="palletgid" class="">
                            <option id="prb3" value="" selected></option>
                            <option value="">ABC</option>
                            <option value="">CDE</option>
                            <option value="">FRT</option>
                        </select>
                    </td>
                    <td class="inputlength2" id="length"><input size=10 id="inputlength" class="inputlength" type="text" contenteditable='true' value=''></td>
                    <td id="width"><input size=10 id="inputwidth" type="text"  contenteditable='true' value=''></td>
                    <td id="height"><input size=10 id="inputheight" type="text" contenteditable='true' value=''></td>
                    <td id="weight"><input size=10 id="inputweight" type="text"  contenteditable='true' value=''></td>
                    <td id="lengthuom"><input size=10 id="inputlengthuom" type="text" contenteditable='true' value=''></td>
                    <td id="weightuom"><input size=10 id="inputweightuom" type="text" contenteditable='true' value=''></td>
                    <td>
                        <select id="" name="" class="">
                            <option id="" value="" selected></option>                           
                            <option value="">1234</option>  
                            <option value="">4555</option>    
                            <option value="">343443</option>    
                        </select>
                    </td>        
                    <td size=15>
                        <span  style="color:green" class="glyphicon glyphicon-copy" onclick="copyRow(this)"></span>
                   
                        <span  style="color:orange" class="glyphicon glyphicon-plus" onclick="addRow(this)"></span>
                    </td>
                </tr>
                </tbody>
            </table>

</body>
</html>

【问题讨论】：

标签： javascript html django

【解决方案1】：

使用下面的代码让它工作

<html>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script> 
<script src="https://ajax.googleapis.com/ajax/libs/cesiumjs/1.78/Build/Cesium/Cesium.js"></script>
<script type="text/javascript">

   function addRow(tableID){                
                
                           
                var tbody = document.querySelector("#" + tableID + " tbody");
                var rowCount = tbody.rows.length;
               // console.log('rowCount '+rowCount);
                var rows = tbody.querySelectorAll("tr");                  
                     var newRow = rows[rowCount-1].cloneNode(true);               
                  var k = newRow.cells[0].children[0].value;
                  var currentNameis = newRow.cells[0].children[0].name;
                  //console.log('currentNameis '+currentNameis);
                  var currentNameisModified = currentNameis.substr(0,10)                  
                  newRow.cells[0].children[0].name = currentNameisModified + (++rowCount);
                  newRow.cells[0].children[0].value = ++k;                  
                 // console.log(newRow);
                  tbody.appendChild(newRow);
              
           }

</script>

<body>
<input type="button" value="Append Segment" onClick="addRow('TableMine')" /> 
<table id="TableMine" border="" class="w3-table-all">
                <thead class="w3-teal">                
                    <th>BOX</th>
                    <th >NUMBERS</th>
                    <th >LENGTH</th>
                    <th >WIDTH</th>
                    <th >HEIGHT</th>
                    <th >WEIGHT</th>
                    <th >LEGNTH UOM</th>
                    <th >WEIGHT UOM</th>
                    <th>FEATURES</th>
                    <th></th>               
                </thead>
                <tbody>                
                    <td>
                    <input size=10 type="text" readonly=True name="ShipUnitId" value='100'></td>                                 <td>
                        <select id="palletgid" name="palletgid" class="">
                            <option id="prb3" value="" selected></option>
                            <option value="">ABC</option>
                            <option value="">CDE</option>
                            <option value="">FRT</option>
                        </select>
                    </td>
                    <td><input size=10 id="inputlength" type="text" contenteditable='true' value=''></td>
                    <td><input size=10 id="inputwidth" type="text"  contenteditable='true'value=''></td>
                    <td><input size=10 id="inputheight" type="text" contenteditable='true'value=''></td>
                    <td><input size=10 id="inputweight" type="text"  contenteditable='true' value=''></td>
                    <td><input size=10 id="inputlengthuom" type="text" contenteditable='true' value=''></td>
                    <td><input size=10 id="inputweightuom" type="text" contenteditable='true' value=''></td>
                    <td>
                        <select id="" name="" class="">
                            <option id="" value="" selected></option>                           
                            <option value="">1234</option>  
                            <option value="">4555</option>    
                            <option value="">343443</option>    
                        </select>
                    </td>        
                    <td size=15>
                        <span  style="color:green" class="glyphicon glyphicon-copy" onclick="copyRow(this)"></span>
                   
                   <span  style="color:orange" class="glyphicon glyphicon-plus" onclick=""></span>
                    </td>
               </tbody>
            </table>

</body>
</html>

【讨论】：