Question

$(document).ready(function() {
  $('input').each(function() {
    if ($(this).name != '') {
      var label = $("<label >").attr('style', "display:none !important;").attr('for', $("input").attr("id")).text($("input").attr("name"));
      $('input').append(label);
    }
  });
});

<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
  </script>

  <head>

    <body>
      <table id="myTable">
        <tbody>
          <tr>
            <td>Account Reference</td>
            <td><input type="text" name="account_reference_textbox" id="account_reference_textbox" maxlength="35" value="">
            </td>
            <td>Forename</td>
            <td><input type="text" name="first_name_textbox" id="first_name_textbox" maxlength="10" value=""></td>
          </tr>
          <tr>
            <td>Customer Reference</td>
            <td><input type="text" name="customer_reference_textbox" id="customer_reference_textbox" maxlength="25" value="">
            </td>
            <td>Surname</td>
            <td><input type="text" name="last_name_textbox" id="last_name_textbox" maxlength="20" value=""></td>
          </tr>
          <tr>
            <td>Company Name</td>
            <td><input type="text" name="company_name_textbox" id="company_name_textbox" maxlength="20" value=""></td>
          </tr>
        </tbody>
      </table>
    </body>
    <html>

我正在尝试使用其属性名称＆amp ;;为每个类型文本的输入创建标签。我正在使用Jquery。

我已经使用输入属性成功创建了一个标签，但未能获得正确的位置。

Answer 1

您正在使用$('input')进行追加，因此所有label都会附加在第一个输入中，因此请使用$(this)将label附加到正确的位置。

＆＃13;

$(document).ready(function() {
  $('input').each(function() {
    if ($(this).name != '') {
      var label = $("<label >").attr('style', "display:none !important;").attr('for', $("input").attr("id")).text($("input").attr("name"));
      $(this).parent().append(label);
    }
  });
});

＆＃13;

<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
  </script>

  <head>

    <body>
      <table id="myTable">
        <tbody>
          <tr>
            <td>Account Reference</td>
            <td><input type="text" name="account_reference_textbox" id="account_reference_textbox" maxlength="35" value="">
            </td>
            <td>Forename</td>
            <td><input type="text" name="first_name_textbox" id="first_name_textbox" maxlength="10" value=""></td>
          </tr>
          <tr>
            <td>Customer Reference</td>
            <td><input type="text" name="customer_reference_textbox" id="customer_reference_textbox" maxlength="25" value="">
            </td>
            <td>Surname</td>
            <td><input type="text" name="last_name_textbox" id="last_name_textbox" maxlength="20" value=""></td>
          </tr>
          <tr>
            <td>Company Name</td>
            <td><input type="text" name="company_name_textbox" id="company_name_textbox" maxlength="20" value=""></td>
          </tr>
        </tbody>
      </table>
    </body>
    <html>

＆＃13;

Answer 2

我不知道您希望放置标签的位置，但此示例将在每次输入后放置它们：

另请注意，如果您使用$("input").attr("id")而不是$(this).attr("id")，则会获得第一个input

的ID

$(document).ready(function() {
  $('input').each(function() {
    if ($(this).name != '') {
      var label = $("<label >").attr('style', "display:none !important;").attr('for', $(this).attr("id")).text($(this).attr("name"));
      $(this).after(label);
    }
  });
});

<强>演示

$(document).ready(function() {
  $('input').each(function() {
    if ($(this).name != '') {
      var label = $("<label >").attr('style', "display:none !important;").attr('for', $(this).attr("id")).text($(this).attr("name"));
      $(this).after(label);
    }
  });
});

<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
  </script>

  <head>

    <body>
      <table id="myTable">
        <tbody>
          <tr>
            <td>Account Reference</td>
            <td><input type="text" name="account_reference_textbox" id="account_reference_textbox" maxlength="35" value="">
            </td>
            <td>Forename</td>
            <td><input type="text" name="first_name_textbox" id="first_name_textbox" maxlength="10" value=""></td>
          </tr>
          <tr>
            <td>Customer Reference</td>
            <td><input type="text" name="customer_reference_textbox" id="customer_reference_textbox" maxlength="25" value="">
            </td>
            <td>Surname</td>
            <td><input type="text" name="last_name_textbox" id="last_name_textbox" maxlength="20" value=""></td>
          </tr>
          <tr>
            <td>Company Name</td>
            <td><input type="text" name="company_name_textbox" id="company_name_textbox" maxlength="20" value=""></td>
          </tr>
        </tbody>
      </table>
    </body>
    <html>

使用输入属性（id，name）为每个类型文本输入创建标签

2 个答案: