用html写一个表格

简单来说,html负责界面。javascript负责操作,例如console,动画等。

下面是示例代码,有问题可以留言:

<style>
  table {
    border-collapse: collapse;
    width: 100%;
  }
  th, td {
    text-align: center;
    border: 1px solid black;
  }
</style>

<table>
  <tr>
    <th>姓名</th>
    <td><input type="text"></td>
    <th>性别</th>
    <td>
      <select>
        <option value="男">男</option>
        <option value="女">女</option>
      </select>
    </td>
  </tr>
  <tr>
    <th>生日</th>
    <td><input type="text"></td>
    <th>户籍所在地</th>
    <td><input type="text"></td>
  </tr>
  <tr>
    <th>是否有电话</th>
    <td colspan="3">
      <input type="radio" name="phone" value="yes" onclick="document.getElementById('phone').disabled = false;">是
      <input type="radio" name="phone" value="no" onclick="document.getElementById('phone').disabled = true;">否
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      联系方式:<input type="text" id="phone" disabled></td>
  </tr>
  <tr>
    <th>爱好</th>
    <td colspan="3">
      <input type="checkbox" name="hobby" value="唱歌">唱歌
      <input type="checkbox" name="hobby" value="跳舞">跳舞
      <input type="checkbox" name="hobby" value="篮球">篮球
      <input type="checkbox" name="hobby" value="其他">其他
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      其他:<input type="text"></td>
  </tr>
<tr>
  <td colspan="4"><button onclick="myFunction()">确认</button></td>
</tr>
</table>

<script>
function myFunction() {
  var x = document.getElementById("myText").value;
  console.log(x);
}
</script>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值