javascript添加表格

<!DOCTYPE html>
<html>


<script>
function AddChargeTableRows(){
    var table = document.getElementById(user_list);

  
    table.style.backgroundColor = '#dddddd';
    var row = table.insertRow(1);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    var cell3 = row.insertCell(2);


    var HTML1 = '<input class="userValue" type="text" id="userName" name="userName" size="10" maxlength="50" required="required"/>';
    
    var HTML2 = '<input class="userValue" type="text" id="userNameKana" name="userNameKana" size="10" maxlength="100" required="required" />';
    
    var HTML3 = '<input class="userValue" type="text" id="ListcompanyName" name="ListcompanyName" size="10" maxlength="200" required="required" />';
	    

    cell1.innerHTML = HTML1;
    cell2.innerHTML = HTML2;
    cell3.innerHTML = HTML3;

}
</script>

<body>

     <table border="1" id="user_list">
          <tr>
	            <td align="center" bgcolor="#beceed">
	              <font color="#000000">氏名</font>
	              <font color="RED" size="-1"><b> *</b></font>
	            </td>
	            <td align="center" bgcolor="#beceed">
	              <font color="#000000">氏名（カナ）</font>
	              <font color="RED" size="-1"><b> *</b></font>
	            </td>
	            <td align="center" bgcolor="#beceed">
	              <font color="#000000">会社名</font>
	              <font color="RED" size="-1"><b> *</b></font>
	            </td>
	         
	            <td align="center"  bgcolor="#beceed">
	                <button type="button" onclick="AddChargeTableRows()">添加</button>
	            </td>
          </tr>
          
          <br>
          
          <tr>
	            <td>
	              <input  type="text" />
	            </td>
	            <td>
	              <input  type="text" />
	            </td>	            <td>
	              <input  type="text" />
	            </td>

          </tr>

          
     </table>


</body>
</html>
猜你喜欢
