问卷html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>问卷调查</title>
        <style type="text/css">
            body,form,input,p {
                padding: 0ox;
                margin: 0 auto;
            }
            div {
                width: 1100px;
                background-color: #edebe7;
                margin: 20px auto;
            }
            h2 {
                text-align: center;
                border-bottom: 3px solid #666;
                width: 1000px;
                margin: 20px auto 0px;
                padding: 60px 0 20px;
            }
            td table {
                border-collapse: collapse;
                margin: 20px auto;
                border: 1px solid #3185CE;
                width: 900px;
            }
            th {
                background-color: #3185CE;
                font-weight: normal;
                line-height: 30px;
                text-align: left;
                padding: 0 12px;
            }
            td {
                line-height: 50px;
                width: 25%;
                font-size: 16px;
                padding-left: 10px;
            }
            span {
                color: #FFF;
                font-size: 18px;
                line-height: 50px;
            }
            .p span {
                color: #000;
                padding: 0 45px 0;
            }
            p {
                text-align: center;
            }
            .tj,.cz {
                width: 200px;
                height: 60px;
                margin: 40px 60px 60px;
                border: 0px;
                font-size: 26px;
                color: #fff;
            }
            .tj {
                background-color: #E89C13;
            }
            .cz {
                background-color: #57aeff;
            }
        </style>
    </head>
    <body>
        <div>
            <h2>问卷调查</h2>
            <form>
                <table>
                    <tr>
                        <td>
                            <table>
                                <tr>
                                    <th colspan="4"><span>1、(必填)</span></th>
                                </tr>
                                <tr>
                                    <td><input type="radio" name="radio_1" id="radio_1_1" />
                                        <label for="radio_1_1">A </label>
                                    </td>
                                    <td><input type="radio" name="radio_1" id="radio_1_2" />
                                        <label for="radio_1_2">B</label>
                                    </td>
                                    <td><input type="radio" name="radio_1" id="radio_1_3" />
                                        <label for="radio_1_3">C</label>
                                    </td>
                                    <td><input type="radio" name="radio_1" id="radio_1_4" />
                                        <label for="radio_1_4">D</label>
                                    </td>
                                </tr>
                            </table>
                            <table>
                                <tr>
                                    <th colspan="4"><span>2、(必填)</span></th>
                                </tr>
                                <tr>
                                    <td><input type="radio" name="radio_2" id="radio_2_1" />
                                        <label for="radio_2_1">A</label>
                                    </td>
                                    <td><input type="radio" name="radio_2" id="radio_2_2" />
                                        <label for="radio_2_2">B</label>
                                    </td>
                                    <td><input type="radio" name="radio_2" id="radio_2_3" />
                                        <label for="radio_2_3">C</label>
                                    </td>
                                    <td><input type="radio" name="radio_2" id="radio_2_4" />
                                        <label for="radio_2_4">D</label>
                                    </td>
                                </tr>
                            </table>
                            <table>
                                <tr>
                                    <th colspan="4"><span>3、 (必填)</span></th>
                                </tr>
                                <tr>
                                    <td><input type="radio" name="radio_3" id="radio_3_1" />
                                        <label for="radio_3_1">A</label>
                                    </td>
                                    <td><input type="radio" name="radio_3" id="radio_3_2" />
                                        <label for="radio_3_2">B</label>
                                    </td>
                                    <td><input type="radio" name="radio_3" id="radio_3_3" />
                                        <label for="radio_3_3">C</label>
                                    </td>
                                    <td><input type="radio" name="radio_3" id="radio_3_4" />
                                        <label for="radio_3_4">D</label>
                                    </td>
                                </tr>
                            </table>
                            <table>
                                <tr>
                                    <th colspan="4"><span>4(必填)</span></th>
                                </tr>
                                <tr>
                                    <td><input type="radio" name="radio_4" id="radio_4_1" />
                                        <label for="radio_4_1">A </label>
                                    </td>
                                    <td><input type="radio" name="radio_4" id="radio_4_2" />
                                        <label for="radio_4_2">B</label>
                                    </td>
                                    <td><input type="radio" name="radio_4" id="radio_4_3" />
                                        <label for="radio_4_3"> C</label>
                                    </td>
                                    <td><input type="radio" name="radio_4" id="radio_4_4" />
                                        <label for="radio_4_4">D</label>
                                    </td>
                                </tr>
                            </table>
                            <table>
                                <tr>
                                    <th colspan="4"><span>5、(必填)</span></th>
                                </tr>
                                <tr>
                                    <td><input type="radio" name="radio_5" id="radio_5_1" />
                                        <label for="radio_5_1">A </label>
                                    </td>
                                    <td><input type="radio" name="radio_5" id="radio_5_2" />
                                        <label for="radio_5_2">B</label>
                                    </td>
                                    <td><input type="radio" name="radio_5" id="radio_5_3" />
                                        <label for="radio_5_3">C</label>
                                    </td>
                                    <td><input type="radio" name="radio_5" id="radio_5_4" />
                                        <label for="radio_5_4">D</label>
                                    </td>
                                </tr>
                            </table>
                            <table>
                                <tr>
                                    <th colspan="4"><span>6、(必填)</span></th>
                                </tr>
                                <tr>
                                    <td><input type="radio" name="radio_6" id="radio_6_1" />
                                        <label for="radio_6_1">A </label>
                                    </td>
                                </tr>
                                <tr >
                                    <td><input type="radio" name="radio_6" id="radio_6_2" />
                                        <label for="radio_6_2">B</label>
                                    </td>
                                </tr>
                                <tr>
                                    <td><input type="radio" name="radio_6" id="radio_6_3" />
                                        <label for="radio_6_3">C </label>
                                    </td>
                                </tr>
                                <tr>
                                    <td><input type="radio" name="radio_6" id="radio_6_4" />
                                        <label for="radio_6_4">D</label>
                                    </td>
                                </tr>

                            </table>
                            <table>
                                <tr>
                                    <th colspan="4"><span>7、(必填)</span></th>
                                </tr>
                                <tr>
                                    <td><input type="radio" name="radio_7" id="radio_7_1" />
                                        <label for="radio_7_1">A </label>
                                    </td>
                                </tr>
                                <tr>
                                    <td><input type="radio" name="radio_7" id="radio_7_2" />
                                        <label for="radio_7_2">B</label>
                                    </td>
                                </tr>
                                <tr>
                                    <td><input type="radio" name="radio_7" id="radio_7_3" />
                                        <label for="radio_7_3">C </label>
                                    </td>
                                </tr>
                                <tr>
                                    <td><input type="radio" name="radio_7" id="radio_7_4" />
                                        <label for="radio_7_4">D</label>
                                    </td>
                                </tr>
                            </table>
                            <table>
                                <tr>
                                    <th colspan="4"><span>8、(必填)</span></th>
                                </tr>
                                <tr>
                                    <td><input type="radio" name="radio_8" id="radio_8_1" />
                                        <label for="radio_8_1">A </label>
                                    </td>
                                    <td><input type="radio" name="radio_8" id="radio_8_2" />
                                        <label for="radio_8_2">B</label>
                                    </td>
                                    <td><input type="radio" name="radio_8" id="radio_8_3" />
                                        <label for="radio_8_3">C </label>
                                    </td>
                                    <td><input type="radio" name="radio_8" id="radio_8_4" />
                                        <label for="radio_8_4">D</label>
                                    </td>
                                </tr>
                            </table>
                            <table>
                                <tr>
                                    <th colspan="4"><span>9、(必填)</span></th>
                                </tr>
                                <tr>
                                    <td><input type="radio" name="radio_9" id="radio_9_1" />
                                        <label for="radio_9_1">A </label>
                                    </td>
                                    <td><input type="radio" name="radio_9" id="radio_9_2" />
                                        <label for="radio_9_2">B </label>
                                    </td>
                                    <td><input type="radio" name="radio_9" id="radio_9_3" />
                                        <label for="radio_9_3">C </label>
                                    </td>
                                    <td><input type="radio" name="radio_9" id="radio_9_4" />
                                        <label for="radio_9_4">D</label>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
                <p>
                    <input type="submit" value="提交" class="tj" />
                    <input type="reset" value="重新填写" class="cz" />
                </p>
            </form>
        </div>
    </body>
</html>

HTML表格中自动生成序列号,可以通过以下步骤实现: 1. 首先,确保你的表格使用了一个唯一的标识符,比如给表格元素添加一个id属性。 2. 在表格的第一列中添加一个特殊的列头,用于显示序列号。可以使用<th>标签,并在其中添加一个文本,比如"序号"。 3. 在每一行的其他列中添加需要展示的数据。 4. 使用JavaScript或Vue等前端框架,通过遍历表格的所有行来自动生成序列号。可以通过以下步骤来实现: a. 获取表格元素的引用,可以使用getElementById()函数。 b. 获取表格的所有行,可以使用querySelectorAll()函数。 c. 使用forEach()函数或for循环遍历每一行。 d. 在遍历的过程中,使用innerHTML属性将序列号添加到每一行的第一列中。可以使用行的索引加1来表示序列号。 下面是一个示例代码,演示了如何在HTML表格中自动生成序列号: ``` HTML代码: <table id="myTable"> <thead> <tr> <th>序号</th> <th>姓名</th> <th>年龄</th> </tr> </thead> <tbody> <tr> <td></td> <td>张三</td> <td>25</td> </tr> <tr> <td></td> <td>李四</td> <td>30</td> </tr> <tr> <td></td> <td>王五</td> <td>28</td> </tr> </tbody> </table> JavaScript代码: <script> // 获取表格元素的引用 var table = document.getElementById("myTable"); // 获取表格的所有行 var rows = table.querySelectorAll("tbody tr"); // 遍历每一行,并生成序号 rows.forEach(function(row, index) { // 获取当前行的第一列单元格 var cell = row.querySelector("td:first-child"); // 设置序号为行索引加1 cell.innerHTML = index + 1; }); </script> ``` 通过以上步骤,你就可以在HTML表格中自动生成序列号了。这样,在每次翻页时,序号会自动更新并显示正确的值。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值