Question

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <table>
      <tr>id</tr>
      <input type="text" id= "101"  style = "color:black" required></td>
      <input type="button"  value="Submit"  style = "color:Red;">
<script>
document.getElementById("101").reset()
</script>
  </body>

</html>

1）我想强制我的id字段，但我无法做到。我已经使用但是它不能正常工作

2）我想在用户点击提交后提交字段后清空我的文本字段

3）在我的代码中，我使用tr作为文本字段，仅建议使用以下tr标记

Answer 1

首先，你的html标记是错误的（你需要把TD放在TR里面），而且你缺少表格标签。

添加表单标签，页面将提交并刷新。默认情况下，文本字段将为空，无需使用javascript。

“required”是一个HTML5标记，它只适用于支持它的html5浏览器。此代码适用于所有兼容的html5浏览器

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <form>
    <table>
      <tr>
          <td>id</td>
          <td><input type="text" id= "101"  style = "color:black" required></td>
      </tr>
      <tr>
          <td colspan="2"><input type="submit"  value="Submit"  style = "color:Red;"></td>
      </tr>
      </table>
      </form>
  </body>

</html>

Answer 2

您在输入字段中输入了一个分号。应该是

<input type="text" id="101" style="color:black;" required>

一般情况下，最好创建一个单独的.css文件而不是使用样式attirbute

一般情况下，您错误地调用了javascript。

<input type="button" value="Submit" style = "color:Red;" onclick="clearInput()">

您应该相应地更改javascript：

<script>
 function clearInput() {
   document.GetElementById('101').value = "";
 }
</script>

您的表格一般是错误的。您的一般结构应该看起来像这样

<table> <td> <tr>1</tr> <tr>2</tr> </td> <td> <tr>Column 2 Row</tr> </td> </table>

一个有效的小提琴示例：

function clearInput() {
  document.getElementById('101').value = "";
}

input[type="button"] {
  color: red;
}

<input type="text" id="101">
<input type="button" value="Submit" onclick="clearInput()">

Answer 3

您需要将代码保留在<form>内，只需提交类型就可以重置它。无需编写javascript来重置。这是您的工作代码段：

  <body>
    <form>
        <table>
          <tr>
            <td>id</td>
            <td><input type="text" id= "101"  style = "color:black" required></td>
            <td><input type="submit"  value="Submit"  style = "color:Red;"></td>        
          </tr>
        </table>
    </form>
  </body>

如果您想要单独的重置按钮来重置字段，请在表格中添加：

<td><input type="reset"  value="Reset"  style = "color:Red;"></td>

Answer 4

如果你想要一个可编辑的网格＆＃34;即一个类似于结构的表，允许您将任何行创建为表单，使用模仿TABLE标记布局的CSS：display：table，display：table-row，display：table-cell。

无需将整个表格包装在表格中，也无需为表格的每个明显行创建单独的表格和表格。

请改为尝试：

<style>
  DIV.table 
  {
      display:table;
  }
  FORM.tr, DIV.tr
  {
      display:table-row;
  }
  SPAN.td
  {
      display:table-cell;
  }
</style>

<div class="table">
  <form class="tr" method="post" action="blah.html">
    <span class="td"><input type="text"/></span>
    <span class="td"><input type="text"/></span>
  </form>
  <div class="tr">
    <span class="td">(cell data)</span>
    <span class="td">(cell data)</span>
  </div>
</div>

将整个TABLE包装在FORM中的问题是，任何和所有表单元素都将在提交时发送（可能是期望但可能不是）。此方法允许您为每个＆＃34;行＆＃34;定义一个表单。并且仅在提交时发送该行数据。

在TR标记（或围绕FORM的TR）周围包装FORM标记的问题在于其无效的HTML。 FORM仍然允许照常提交，但此时DOM已被破坏。注意：尝试使用JavaScript获取FORM或TR的子元素，这可能会导致意外结果。

请注意，IE7不支持这些CSS表格样式，IE8需要一个doctype声明才能将其纳入＆＃34;标准＆＃34;模式:(尝试这个或类似的东西）

任何其他支持display的浏览器：table，display：table-row和display：table-cell应该显示你的CSS数据表，就像你使用TABLE，TR和TD标签一样。他们中的大多数都这样做。

请注意，您还可以通过将行组包装在另一个DIV中来模拟THEAD，TBODY，TFOOT，分别使用display：table-header-group，table-row-group和table-footer-group

将表行和后续单元格作为必填字段

4 个答案: