1

我有以下格式的表格。

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 将表数据发送到表单。任何帮助都感激不尽！

感谢和问候卡西克

4

2 回答 2

0

我的英语不是很好，所以也许我理解得不够好，但是要做你想做的，我会这样做：

首先，您应该改进您的 HTML 代码，这将使工作变得更容易：

在您的用户表中：

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

前任：<table id="users"></table>

  • <thead><tr><th> </th></tr></thead><tbody> </tbody>: 使用这个标记可以让你区分表头和表内容

  • <tr> </tr>：在服务器端添加一个id以知道谁是谁（即：如果您有两个 John Smith）

前任：<tr id="name_01"><td>...</td></tr>

  • <td> </td>：添加一个class属性以知道名字和姓氏在哪里

前任：<td class="firstname">...</td><td class="lastname"></td>

在您的表格中：

  • <form> </form>：添加一个id也更容易抓住它

前任：<form id="usersform"></form>

  • <table> </table>: 不要忘记<table>标记！

  • <label> </label>: 添加for匹配输入id的属性

前任：<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>

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

  1. 一次只有一个表格条目
  2. 拥有所有表格条目

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 伪类来处理表格单元格或表单输入，但我认为这种方式更容易理解。

于 2013-03-17T17:44:45.270 回答
0

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

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

和 ：

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

可能有更好的方法来做到这一点，但这只是一个想法......

- 编辑 ： -

对不起，我忘记了一些重要的事情：你必须像这样命名你的表格：

<form name="myform" action="file.php">
于 2013-03-15T03:43:19.490 回答