Question

我有以下格式的表格。

FirstName Last Name 
Jill      Smith 
Eve       Jackson

我还有表格来更新名字和名字。姓。这是表单代码。

   <!DOCTYPE html>
<html>
<body>

<form border="1">
  <tr>
     <td><label >FirtsName</label></td>
     <td><input type="text" id="firstname" class="medium"></td>
    </tr>
  <tr>
   <td><label >LastName</label></td>
   <td><input type="text" id="lastname" class="medium"></td>
   </tr>

</form>

</body>
</html>

如何使用jquery或javascript将表数据发送到表单。任何帮助将不胜感激！

谢谢＆amp;问候 Karthick

Answer 1

我不是js的专家，但每次输入失去焦点时你都可以提交表格

使用<form name="myform" border="1">

和：

<input type="text" id="firstname" class="medium" onBlur="document.forms["myform"].submit()">

这可能是更好的方法，但这只是一个想法...

- 修改： -

抱歉，我忘了重要的事情：你必须这样命名你的表格：

<form name="myform" action="file.php">

Answer 2

我的英语不是很好，所以也许我不太了解，但要做你想做的事，我会这样做：

首先，您应该改进HTML代码，这将使工作变得更加轻松：

在您的用户表中：

<table> </table>：使用jQuery添加id以更轻松地处理它：$('#id')方法

ex：<table id="users"></table>

<thead><tr><th> </th></tr></thead><tbody> </tbody>：使用此标记可以区分表格标题和表格内容
<tr> </tr>：在服务器端添加id以了解谁是谁（例如：如果您有两个John Smith）

ex：<tr id="name_01"><td>...</td></tr>

<td> </td>：添加class属性以了解名字和姓氏在哪里

ex：<td class="firstname">...</td><td class="lastname"></td>

以您的形式：

<form> </form>：添加id以便更轻松地抓住它

ex：<form id="usersform"></form>

<table> </table>：不要忘记<table>标记！
<label> </label>：添加与输入ID匹配的for属性

ex：<label for="firstname" >FirtsName</label>

现在，您的表格应如下所示：

 <table id="users">
      <thead>
           <tr>
                <th>Firstname</th><th>Last Name</th>
           </tr>
      </thead>
      <tbody>
           <tr id="name_01">
                <td class="firstname">Jill</td><td class="lastname">Smith</td>
           </tr>
           <tr id="name_02">
                <td class="firstname">Eve</td><td class="lastname">Jackson</td>
           </tr>
      </tbody>
 </table>

有几种方法可以制作你想要的东西，但基本上有两种主要方式：

一次只有表单中的一个表条目
拥有所有表格条目

I - 一次只有一个表条目

HTML

 <form id="usersform" name="usersedit" >
      <table id="users">
          <tr>
              <td><label for="firstname" >FirtsName</label></td>
              <td><input type="text" id="firstname" class="medium"></td>
          </tr>
          <tr>
              <td><label for="lastname" >LastName</label></td>
              <td><input type="text" id="lastname" class="medium"></td>
          </tr>
      </table>
 </form>

jQuery：

//When there is a click on a line of the table
$('#users tbody tr').click(function(e) {
    //Get the <tr> id
    userid = $(this).attr('id');
    //Put the value of the firstname cell in the firstname input
    $('#usersform input#firstname').val($(this).find('td.firstname').html());

    //You can add a name attribute or an id for later works
    $('#usersform input#firstname').attr('name','first'+userid);

    //Now for the lastname input
    $('#usersform input#lastname').val($(this).find('td.lastname').html()).attr('name','first'+userid);
}

II - 所有表条目

HTML

 <form id="usersform" name="usersedit" >
      <table id="users">
           <thead>
                <tr>
                     <th>Firstname</th><th>Last Name</th>
                </tr>
           </thead>
           <tbody>
           </tbody>
      </table>
 </form>

jQuery：

//When there is a click on the table (#users) :
$.('#users').click(function(e){
    //handle the part of the form where we want to add input field
    myformtable = $('#userform table tbody');

    //For each row in the table
    $.('#users tbody tr').each(function(e) {
        //Create and append a new line
        userline = $(document.createElement('tr'));
        userline.appendTo(myformtable);

        //Create and append a firstname cell
        tdfirstname = $(document.createElement('td')).addClass('firstname');
        tdfirstname.appendTo(userline);

        //Create and append a firstname input
        firstname = $(document.createElement('input')).addClass('medium');
        firstname.appendTo(tdfirstname);

        //Add attribute
        firstname.attr({type: 'text', name: 'first'+$(this).attr('id')});

        //Set value
        firstname.val($(this).find('.firstname').html());

        //Same things with the lastname
        tdlastname = $(document.createElement('td')).addClass('lastname');
        tdfirstname.after(tdlastname);

        lastname = $(document.createElement('input')).addClass('medium');
        lastname.appendTo(tdlastname);

        lastname.attr({type: 'text', name: 'last'+$(this).attr('id')});

        lastname.val($(this).find('.lastname').html());
    }
}

您可以使用循环来改进它，或使用css伪类来处理表格单元格或表单输入，但我认为这样更容易理解。

将HTML表格数据发送到表单

2 个答案:

I - 一次只有一个表条目

II - 所有表条目