每次单击都向表中添加行，从而操纵名称字段

adding rows to table per click, manipulating name field thereby

本文关键字：操纵 字段 添加行 单击      更新时间：2023-09-26

我找到了这个脚本，它在表中生成一行
此外，我还希望它更改其生成的行的名称字段，因为以后需要将每个新生成的行的数据保存到数据库中
但是，单击只会创建一行，而不会重命名该行的名称字段。

我已经把所有必要的代码片段都剪切到这些括号中。它应该是可复制粘贴的工作。

echo '<html><head>';
echo '<title>Adding rows</title>';
//the Java-script part which generates the new rows 
//(i guess the "row-name"-manipulation must be embedded here, i just don't get how :-( )
echo 
'<SCRIPT language="javascript">
      function addRowEntry(tableID){
          var table = document.getElementById(tableID);
          var rowCount = table.rows.length;
          var row = table.insertRow(rowCount);
          var colCount = table.rows[0].cells.length;
          for(var i=0; i<colCount; i++) {
              var newcell = row.insertCell(i);
              newcell.innerHTML = table.rows[0].cells[i].innerHTML;
          }
      }
</SCRIPT>';
echo '</head>';
//the body-part which contains the button with the "onclick"-call on that function
echo '<body>';
//the form which on submit should pass all those created rows into the $_POST-Variables
echo '<form action="passToEvaluationScript.php" method="POST">';
//the button with the "onClick"-call
echo "<input type='button' value='add row entry' onClick=addRowEntry('myTable')>";
//the table which get the additional row
echo '<table id="myTable">';
echo '<tr>';
echo '<td>';
//this element should actually be renamed each click
//e.g. 10 consecutive clicks should create 10 of these "drop-down-boxes"
//each named country1, country2, ........ country10 respectively
echo '<SELECT name="country">
        <OPTION value="in">India</OPTION>
        <OPTION value="de">Germany</OPTION>
        <OPTION value="fr">France</OPTION>
        <OPTION value="us">United States</OPTION>
        <OPTION value="ch">Switzerland</OPTION>
      </SELECT>';
echo '</td>';
echo '</tr>';
echo '</table>';
echo '<input type="submit">';
echo '</form>';
echo '</body>';
echo '</html>';

这个元素甚至可以与页面上的其他<select>元素一起使用：

<SCRIPT language="javascript">
  function addRowEntry(tableID){
      var table = document.getElementById(tableID);
      var rowCount = table.rows.length;
      // create a row element
      var row = document.createElement("tr");
      // add the row to the table
      table.appendChild(row);
      var colCount = table.rows[0].cells.length;
      for(var i=0; i<colCount; i++) {
          var newcell = row.insertCell(i);
          newcell.innerHTML = table.rows[0].cells[i].innerHTML;
      }
     // get the select element
     var dropdown = row.getElementsByTagName("select")[0];
     // get the current total of dropdowns in the table
     var total = table.getElementsByTagName("select").length;
     // set the name
     dropdown.setAttribute("name", "country" + total);
  }
</SCRIPT>

如果你想在新行上添加一个新的select元素，它的值来自上一个select，你可以尝试这样的方法：

<SCRIPT language="javascript">
      function addRowEntry(tableID){
        var table = document.getElementById(tableID);
        var rowCount = table.rows.length;
        var row = table.insertRow(rowCount);
        var colCount = table.rows[0].cells.length;
        for(var i=0; i<colCount; i++) {
            var newcell = row.insertCell(i);
            newcell.innerHTML = table.rows[0].cells[i].innerHTML;
        }
        document.getElementsByTagName('select')[document.getElementsByTagName('select').length - 1].setAttribute('name','country'+document.getElementsByTagName('select').length);
      }
</SCRIPT>

如果这不是你想要的，请告诉我。感谢

相关文章：