<input> 中 js 怎么根据的name获取value

您好，可以使用以下代码获取指定name属性的元素的value值：

var value = document.getElementsByName("name")[0].value;

其中，name为需要获取value值的元素的name属性值。

相关问题

<table> <form action="updatePerson.do?personId=${sessionScope.updateById.personId}" method="post"> <tr> <td>姓名：</td> <td><input type="text" name="personName" value="${sessionScope.updateById.personName}"></td> </tr> <tr> <td>称呼：</td> <td> <input type="text" name="personNickName" value="${sessionScope.updateById.personNickName}"></td> </tr> <tr> <td>性别：</td> <td><input type="radio" name="personSex" value="${sessionScope.updateById.personSex}">男<input type="radio" name="personSex" value="${sessionScope.updateById.personSex}">女</td> </tr> <tr> <td> 类别：</td> <td><input type="text" name="kindId" value="${sessionScope.updateById.kindId}"></td> </tr> <tr> <td>生日：</td> <td><input type="text" name="personBirthday" value="${sessionScope.updateById.personBirthday}"></td> </tr> <tr> <td>电话：</td> <td><input type="text" name="personTelephone" value="${sessionScope.updateById.personTelephone}"></td> </tr> <tr> <td>QQ：</td> <td> <input type="text" name="personQQ" value="${sessionScope.updateById.personQQ}"></td> </tr> <tr> <td> 邮箱：</td> <td><input type="text" name="personEmail" value="${sessionScope.updateById.personEmail}"></td> </tr> <tr> <td> 地址：</td> <td> <input type="text" name="personAddress" value="${sessionScope.updateById.personAddress}"></td> </tr> <tr> <td> MSN：</td> <td><input type="text" name="personMSN" value="${sessionScope.updateById.personMSN}"></td> </tr> <tr> <td> 简介：</td> <td><textarea cols="10" rows="5" name="personInfo">${sessionScope.updateById.personInfo}</textarea></td> </tr> <tr> <td><input type="submit" name="重填" value="重填"></td> <td><input type="submit" name="提交" value="提交"></td> </tr> </form> </table>为上述代码设计简单分格的ss和js代码

以下是简单的HTML和JavaScript代码：

HTML代码：

<table>
  <form id="updateForm" action="updatePerson.do?personId=${sessionScope.updateById.personId}" method="post">
    <tr>
      <td>姓名：</td>
      <td><input type="text" name="personName" value="${sessionScope.updateById.personName}"></td>
    </tr>
    <tr>
      <td>称呼：</td>
      <td><input type="text" name="personNickName" value="${sessionScope.updateById.personNickName}"></td>
    </tr>
    <tr>
      <td>性别：</td>
      <td>
        <input type="radio" name="personSex" value="男" checked>男
        <input type="radio" name="personSex" value="女">女
      </td>
    </tr>
    <tr>
      <td> 类别：</td>
      <td><input type="text" name="kindId" value="${sessionScope.updateById.kindId}"></td>
    </tr>
    <tr>
      <td>生日：</td>
      <td><input type="text" name="personBirthday" value="${sessionScope.updateById.personBirthday}"></td>
    </tr>
    <tr>
      <td>电话：</td>
      <td><input type="text" name="personTelephone" value="${sessionScope.updateById.personTelephone}"></td>
    </tr>
    <tr>
      <td>QQ：</td>
      <td><input type="text" name="personQQ" value="${sessionScope.updateById.personQQ}"></td>
    </tr>
    <tr>
      <td> 邮箱：</td>
      <td><input type="text" name="personEmail" value="${sessionScope.updateById.personEmail}"></td>
    </tr>
    <tr>
      <td> 地址：</td>
      <td><input type="text" name="personAddress" value="${sessionScope.updateById.personAddress}"></td>
    </tr>
    <tr>
      <td> MSN：</td>
      <td><input type="text" name="personMSN" value="${sessionScope.updateById.personMSN}"></td>
    </tr>
    <tr>
      <td> 简介：</td>
      <td><textarea cols="10" rows="5" name="personInfo">${sessionScope.updateById.personInfo}</textarea></td>
    </tr>
    <tr>
      <td><input type="button" name="重填" value="重填" onclick="resetForm()"></td>
      <td><input type="button" name="提交" value="提交" onclick="submitForm()"></td>
    </tr>
  </form>
</table>

JavaScript代码：

function resetForm() {
  document.getElementById("updateForm").reset();
}

function submitForm() {
  var form = document.getElementById("updateForm");
  if (form.checkValidity()) {
    form.submit();
  } else {
    alert("请完善所有信息！");
  }
}

其中，resetForm()函数用于重置表单，submitForm()函数用于提交表单。在submitForm()函数中，我们使用了form.checkValidity()方法来检查表单是否完整，如果表单完整，则使用form.submit()方法提交表单，否则弹出提示框提醒用户完善表单信息。

<table id="entryDetail"> <thead > <tr> <th>操作</th> <th>提单号/运单号</th> <th>一程日期</th> <th>二程日期</th> <th>预计到货日期</th> <th>海船公司</th> <th>放箱日期</th> <th>放箱单上传</th> </tr> <tr> <td><input type="button" name="comment" onclick="deleteTableRow(this)" value="删除"></td> <td><input type="text" name="comment"></td> <td><input type="date" name="date1"></td> <td><input type="date" name="date2"></td> <td><input type="date" name="date3"></td> <td><input type="text" name="commen1t"></td> <td><input type="date" name="date4"></td> <td><input type="file" name="attachment"></td> </tr> </thead> </table>宽度铺满滚动和选中删除

您可以使用以下代码来实现您的要求：

<style>
    #entryDetail {
        width: 100%;
        table-layout: fixed;
    }
    th, td {
        padding: 10px;
        text-align: center;
    }
    th:first-child, td:first-child {
        width: 10%;
    }
    th:nth-child(2), td:nth-child(2) {
        width: 15%;
    }
    th:nth-child(3), td:nth-child(3), th:nth-child(4), td:nth-child(4), th:nth-child(5), td:nth-child(5) {
        width: 12%;
    }
    th:nth-child(6), td:nth-child(6) {
        width: 20%;
    }
    th:last-child, td:last-child {
        width: 16%;
    }
    tbody tr:hover {
        background-color: #f5f5f5;
    }
</style>

<script>
    function deleteTableRow(btn) {
        var row = btn.parentNode.parentNode;
        row.parentNode.removeChild(row);
    }
</script>

<table id="entryDetail">
    <thead>
        <tr>
            <th>操作</th>
            <th>提单号/运单号</th>
            <th>一程日期</th>
            <th>二程日期</th>
            <th>预计到货日期</th>
            <th>海船公司</th>
            <th>放箱日期</th>
            <th>放箱单上传</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="button" name="comment" onclick="deleteTableRow(this)" value="删除"></td>
            <td><input type="text" name="comment"></td>
            <td><input type="date" name="date1"></td>
            <td><input type="date" name="date2"></td>
            <td><input type="date" name="date3"></td>
            <td><input type="text" name="comment1"></td>
            <td><input type="date" name="date4"></td>
            <td><input type="file" name="attachment"></td>
        </tr>
    </tbody>
</table>

此代码将表格的宽度设置为100%，并使其表格布局固定。它还将表头和单元格的填充和文本对齐方式设置为居中。每个表头和单元格都有一个宽度百分比，以便在表格宽度变化时自适应。还添加了一个鼠标悬停样式以提高用户体验。在代码的底部，有一个JavaScript函数deleteTableRow(btn)，它将从表格中删除所在行。