將HTML表格數據發送到表單
[英]Sending HTML table data to a form
問題描述
我的表格格式如下。
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將表數據發送到表單。 任何幫助都感激不盡！
謝謝＆問候Karthick
2 個解決方案
解決方案1
0 2013-03-15 03:43:19
我不是js專家，但是每次輸入失去焦點時，您都可以提交表單
使用<form name="myform" border="1">
和：
<input type="text" id="firstname" class="medium" onBlur="document.forms["myform"].submit()">
可能有更好的方法可以做到這一點，但這只是一個主意...
-編輯：-
抱歉，我忘記了一些重要的事情：您必須這樣命名您的表單：
<form name="myform" action="file.php">
解決方案2
0 2013-03-17 17:44:45
我的英語不太好，所以也許我不太懂，但是要做你想做的，我會這樣：
首先，您應該改進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>：添加與輸入ID匹配的for屬性
例如： <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 中的表單數據發送不正確
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.