使用javascript

时间：2015-07-14 17:39:34

标签： javascript

我已经完成了针对此主题的建议解决方案，但我拒绝使用它，因为对于大量列来说它很麻烦。下面是我桌子的一个小版本。我有两个按钮。一个人让我一次向表中添加一行。这很好用。但是，我希望用户只需单击即可添加所需的行数。这不起作用。 javascript可以不这样做吗？

<!DOCTYPE html>
<html>
<head>
<title>Bio-probotics</title>
   <style type="text/css">
    body {font-family: Arial, Verdana, Helvetica,Sans-serif; padding: 1px;  
    font  size: 14px;}
    th {font-weight: bold; text-align: left; border: 1px; border-style: 
    solid; margin: 0px; border-colapse: colapse;}
    td {font-weight: normal; text-align: left; border: 1px; border-style: 
    solid; margin: 0px; border-colapse: colapse;}
    .total {font-weight: bold}
    .chem:focus {background-color: rgb(250,250,150);}
    .hidecell {border: 0px; margin: 0px; border-colapse: colapse;}
    .nofoc {font-weight: bold; text-align: right;}
    .newRow {font-weight: bold; border: 0px; width: 200px; font-style: 
    italic; background-color: rgb(240,240,240);}
    .newRow:hover {background-color: rgb(255,255,150);}
    </style>
    <script 
    src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
    </script>
    </head>
    <body>
    <table id="pr">
    <thead>
    <tr id="thd">
    <th>s/n</th>
    <th>Enzyme Name</th>
    <th>Cat 1</th>
    <th>Cat 2</th>
    <th>Cat 3</th>
    <th>Energy Level</th>
    <th>BioImpluse</th>
    <th>Simulant</th>
    </tr>
    </thead>
    <tbody>
    <tr id="mpf">
    <td id="sn" input type="text" class="chem" name="sn" /></td>
    <td id="ename"><input type="text" class="chem" name="ename" /></td>
     <td id="cat1">
    <select>
      <option>P100</option>
      <option>P200</option>
      <option>P300</option>
    </select>
    </td>
    <td>
    <select id="cat2">
      <option>C384A</option>
      <option>C384B</option>
      <option>C384C</option>
    </select>
    </td>
    <td>
    <select id="cat3">
      <option>EMQ65</option>
      <option>EMQ84</option>
    </select>
    </td>
    <td id="el"><input type="text" class="chem" onchange="update((this));"  
    /></td>
    <td id="bi"><input type="text" class="chem" onchange="update((this));" 
    /></td>
    <td id="bi"><input type="text" class="chem" onchange="update((this));" 
    /></td>
    </tr>
    </tbody>
    <tfoot id="tft">
    <tr>
    <td class="hidecell" /></td>
    <td class="hidecell" /></td>
    <td class="hidecell" /></td>
    <td class="hidecell" /></td>
    <td class="total"><b>Total</b></td>
    <td id="col6" class="nofoc"><input type="text" readonly /></td>
    <td id="col7" class="nofoc"><input type="text" readonly /></td>
    <td id="col8" class="nofoc"><input type="text" readonly /></td>
    </tr>
    </tfoot>
    </table>
    <input id="newRow" class="newRow" onclick="addRow()" value="Click to Add 
    one Row @ in one click" readonly>
    <br><br>
    <input id="newRows" class="newRow" onclick="addRows()" value="Click to 
    Add 40 Rows @ one click" readonly>
    <br>

    <script>
    function addRow(){
        var tbl, elmnt, cln;
        tbl = document.getElementById('pr');
        elmnt = tbl.getElementsByTagName("TR")[1];
        cln = elmnt.cloneNode(true);
        tbl.tBodies[0].appendChild(cln);
        }
    </script>

    <script>
    function addRows(){
    var i; tbl, elmnt, cln;
        for (i = 1, i = 40, i++) {
        tbl = document.getElementById('pr');
        elmnt = tbl.getElementsByTagName("TR")[1];
        cln = elmnt.cloneNode(true);
        tbl.tBodies[0].appendChild(cln);
        }
    }
    </script>
    </body>
    </html>

3 个答案:

答案 0 :(得分：0)

当然可以。在addRows()函数中，您可以使用addRow()函数，因此您无需重复逻辑。将addRows()函数替换为：

function addRows() {
    for (var i = 1; i < 40; i++)
            addRow();
}

这将创建39个表行 你的HTML代码中也有一些语法错误，所以我建议使用某种HTML验证工具来修复它们。

答案 1 :(得分：0)

我刚刚更新了你的代码。有几个错误我已更新。 您可以jst替换 addRow（）和 addRows（）函数

请检查此代码

＆＃13;
＆＃13; 
function addRows(){
    var i, tbl, elmnt, cln;
        for (i = 1; i <= 40; i++) {
        tbl = document.getElementById('pr');
        elmnt = tbl.getElementsByTagName("TR")[1];
        cln = elmnt.cloneNode(true);
        tbl.tBodies[0].appendChild(cln);
        }
    }

function addRow(){
        var tbl, elmnt, cln;
        tbl = document.getElementById('pr');
        elmnt = tbl.getElementsByTagName("TR")[1];
        cln = elmnt.cloneNode(true);
        tbl.tBodies[0].appendChild(cln);
        }
＆＃13; 
body {font-family: Arial, Verdana, Helvetica,Sans-serif; padding: 1px;  
    font  size: 14px;}
    th {font-weight: bold; text-align: left; border: 1px; border-style: 
    solid; margin: 0px; border-colapse: colapse;}
    td {font-weight: normal; text-align: left; border: 1px; border-style: 
    solid; margin: 0px; border-colapse: colapse;}
    .total {font-weight: bold}
    .chem:focus {background-color: rgb(250,250,150);}
    .hidecell {border: 0px; margin: 0px; border-colapse: colapse;}
    .nofoc {font-weight: bold; text-align: right;}
    .newRow {font-weight: bold; border: 0px; width: 200px; font-style: 
    italic; background-color: rgb(240,240,240);}
    .newRow:hover {background-color: rgb(255,255,150);}
＆＃13; 
<!DOCTYPE html>
<html>
<head>
<title>Bio-probotics</title>
   <style type="text/css">
   
    </style>
    <script 
    src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
    </script>
    </head>
    <body>
    <table id="pr">
    <thead>
    <tr id="thd">
    <th>s/n</th>
    <th>Enzyme Name</th>
    <th>Cat 1</th>
    <th>Cat 2</th>
    <th>Cat 3</th>
    <th>Energy Level</th>
    <th>BioImpluse</th>
    <th>Simulant</th>
    </tr>
    </thead>
    <tbody>
    <tr id="mpf">
    <td id="sn" input type="text" class="chem" name="sn" /></td>
    <td id="ename"><input type="text" class="chem" name="ename" /></td>
     <td id="cat1">
    <select>
      <option>P100</option>
      <option>P200</option>
      <option>P300</option>
    </select>
    </td>
    <td>
    <select id="cat2">
      <option>C384A</option>
      <option>C384B</option>
      <option>C384C</option>
    </select>
    </td>
    <td>
    <select id="cat3">
      <option>EMQ65</option>
      <option>EMQ84</option>
    </select>
    </td>
    <td id="el"><input type="text" class="chem" onchange="update((this));"  
    /></td>
    <td id="bi"><input type="text" class="chem" onchange="update((this));" 
    /></td>
    <td id="bi"><input type="text" class="chem" onchange="update((this));" 
    /></td>
    </tr>
    </tbody>
    <tfoot id="tft">
    <tr>
    <td class="hidecell" /></td>
    <td class="hidecell" /></td>
    <td class="hidecell" /></td>
    <td class="hidecell" /></td>
    <td class="total"><b>Total</b></td>
    <td id="col6" class="nofoc"><input type="text" readonly /></td>
    <td id="col7" class="nofoc"><input type="text" readonly /></td>
    <td id="col8" class="nofoc"><input type="text" readonly /></td>
    </tr>
    </tfoot>
    </table>
    <input id="newRow" class="newRow" onclick="addRow()" value="Click to Add 
    one Row @ in one click" readonly>
    <br><br>
    <input id="newRows" class="newRow" onclick="addRows()" value="Click to 
    Add 40 Rows @ one click" readonly>
    <br>

   
    </body>
    </html>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

有可能，只需添加输入，用户将在其中键入要添加的行数，读取值并使用 执行addRow（）函数。

<input type="text" id="num_rows">

将Javascript编辑为：

function addRows() {
  var rows = document.getElementById('num_rows');
  if(rows < 150) {  //check for some limit
    for (var i = 0; i < rows; i++){
     addRow();
    }
  }
}
相关问题
最新问题