Javascript 在HTML中动态创建多行表_Javascript_Html

Javascript 在HTML中动态创建多行表

javascript html

Javascript 在HTML中动态创建多行表,javascript,html,Javascript,Html,我正在尝试创建一个表，在其中输入有关多个教授的信息。我如何才能创建多行以输入信息 <html> <form> <table border="2px"> <TR> <TH>Professor Name</TH> <TH>DOB</TH> <TH>Professor Qualification</TH> <TH&

我正在尝试创建一个表，在其中输入有关多个教授的信息。我如何才能创建多行以输入信息

    <html>
    <form>
    <table border="2px">
    <TR>
    <TH>Professor Name</TH>
    <TH>DOB</TH>
    <TH>Professor Qualification</TH>
    <TH>Department</TH>
    <TH>Submit Action</TH>
    </TR>
    <TR>
    <TD>
    <input type="text" name="Professor Name">
    <TD>
    <input type="date" name="DOB">
    </TD>
    <TD>
    <input type="text" name="Professor Qualification"> 
    </TD>
    <TD>
    <Please Select Professor Department>
    <select name="Department">
    <option>Select</option>
    <option>Mechanical Engineering</option>
    <option>Electronics & Telecommunication</option>
    <option>Computer Science</option>
    <TD>
    <input type="submit" value="submit me">
    </TD>
    </TR>
    </form>
    </html>


教授姓名
出生日期
教授资格
部门
提交行动
挑选
机械工程
电子与电信
计算机科学

用

s添加另一个

，并为您的输入指定一个不同的名称。如果使用PHP，则需要在基名称后面加上字符，以便能够以数组的形式访问输入数据

<form action="submit.php" method="post">
    <table border="2">
        <tr>
            <th>Professor Name</th>
            <th>DOB</th>
            <th>Professor Qualification</th>
            <th>Department</th>
            <th>Submit Action</th>
        </tr>
        <tr>
            <td><input type="text" name="profName[]" placeholder="Professor Name" /></td>
            <td><input type="date" name="dob[]" /></td>
            <td><input type="text" name="profQual[]" placeholder="Professor Qualification" /></td>
            <td>
                &lt;Please Select Professor Department&gt;
                <select name="department[]">
                    <option>Select</option>
                    <option value="1">Mechanical Engineering</option>
                    <option value="2">Electronics & Telecommunication</option>
                    <option value="3">Computer Science</option>
                </select>
            </td>
        </tr>
        <tr>
            <td><input type="text" name="profName[]" placeholder="Professor Name" /></td>
            <td><input type="date" name="dob[]" /></td>
            <td><input type="text" name="profQual[]" placeholder="Professor Qualification" /></td>
            <td>
                &lt;Please Select Professor Department&gt;
                <select name="department[]">
                    <option>Select</option>
                    <option value="1">Mechanical Engineering</option>
                    <option value="2">Electronics & Telecommunication</option>
                    <option value="3">Computer Science</option>
                </select>
            </td>
        </tr>
        ... more trs ...
    </table>
    <input type="submit" name="submit" value="submit me" />
</form>


教授姓名
出生日期
教授资格
部门
提交行动
请选择教授系
挑选
机械工程
电子与电信
计算机科学
请选择教授系
挑选
机械工程
电子与电信
计算机科学
... 更多trs。。。

我正在使用的脚本

   <script type="text/javascript">
   function insRow()
   {
   //alert("came here");
   var x=document.getElementById('staff');
      // deep clone the targeted row
   var new_row = x.rows[1].cloneNode(true);
   // get the total number of rows
   var len = x.rows.length;
   // set the innerHTML of the first row 
   new_row.cells[0].innerHTML = len;

   // grab the input from the first cell and update its ID and value
    var inp1 = new_row.cells[1].getElementsByTagName('input')[0];
    inp1.id += len;
    inp1.value = '';

   // grab the input from the first cell and update its ID and value
    var inp2 = new_row.cells[2].getElementsByTagName('input')[0];
    inp2.id += len;
    inp2.value = '';

   // append the new row to the table
    x.appendChild( new_row );
    }

    </script>


函数insRow（）
{
//警惕（“来到这里”）；
var x=document.getElementById（'staff'）；
//深度克隆目标行
var new_row=x.rows[1]。克隆节点（true）；
//获取总行数
var len=x.rows.length；
//设置第一行的innerHTML
新的行。单元格[0]。innerHTML=len；
//从第一个单元格获取输入并更新其ID和值
var inp1=new_row.cells[1]。getElementsByTagName（'input'）[0]；
inp1.id+=len；
inp1.value=''；
//从第一个单元格获取输入并更新其ID和值
var inp2=new_row.cells[2].getElementsByTagName（'input'）[0]；
inp2.id+=len；
inp2.value=''；
//将新行追加到表中
x、 追加子项（新的_行）；
}

要么我没有回答问题，要么就是刚才回答的人。如果我是对的，您希望动态地将行添加到表中，对吗？谢谢。我想这就是我问题的答案，但我需要一个提交按钮到每一行。如果你需要一个提交按钮到每一行，那么最好使用ajax。否则，您将最终提交整个表（这是您当前设置的），请稍等。添加新行的代码在此处有效，但在我的浏览器中无效，即使我复制粘贴了相同的代码，并且我已经阅读了如何为每一行添加单独的按钮add.addEventListener（'click'，function（e））{var row=staff.insertRow（）；for（var c=0；c）有人能告诉我为什么不在我的浏览器中添加行吗可能是因为我有gogle chrome？？？