![](/img/trans.png)
[英]How to display selected HTML table row value into input type radio and checkbox using JavaScript
[英]How to add row in table with Javascript , table value checkbox,textbox,radio,select option?
您可以创建一个类似于 HTML 代码的字符串,表示该行:
var new_row='<tr>'
+ '<td><input type="text" id="firstName" name="firstName"></td>'
+ '<td><input type="text" id="lastName" name="lastName"></td>'
+ '<td><input type="radio" id="gender" name="gender"></td>'
+ '</tr>';
我只创建了其中的一部分,您需要添加案例所需的所有内容。 然后可以使用此 JS 将新行添加到您的表中:
document.getElementById('table_id').append(new_row);
为了向现有表追加新行,您可以在Add的按钮单击事件上调用具有以下内容的函数。
var table = document.getElementById("table_name");
var tr = document.createElement("tr");
var td1 = document.createElement("td");
var td2 = document.createElement("td");
var td3 = document.createElement("td");
//Rest of the required field data (td) will be declared here
var firstname = document.createElement('input');
firstname.type = 'text';
var lastname = document.createElement('input');
lastname.type = 'text';
//CReate the rest of the elements and append them to the respective <td>
td1.appendChild(firstname);
td2.appendChild(lastname);
//Append the remaining elements
//Then Append the <td>s to the row
tr.appendChild(td1);
tr.appendChild(td2);
table.appendChild(tr);
要在 Gender 列中创建单选按钮,您可以在上述函数本身中显示代码,也可以将其提取到单独的函数中,然后将新创建的单选按钮分区附加到相应的 td 中。 此处显示了创建单选按钮分区的代码。
var objDiv = document.getElementById("radioDiv");
var radioItem1 = document.createElement("input");
radioItem1.type = "radio";
radioItem1.name = "radioGender";
radioItem1.id = "radio1";
radioItem1.value = "Male";
radioItem1.defaultChecked = true;
var radioItem2 = document.createElement("input");
radioItem2.type = "radio";
radioItem2.name = "radioGender";
radioItem2.id = "radio2";
radioItem2.value = "Female";
var objTextNode1 = document.createTextNode("Male");
var objTextNode2 = document.createTextNode("Female");
var objLabel = document.createElement("label");
objLabel.htmlFor = radioItem1.id;
objLabel.appendChild(radioItem1);
objLabel.appendChild(objTextNode1);
var objLabel2 = document.createElement("label");
objLabel2.htmlFor = radioItem2.id;
objLabel2.appendChild(radioItem2);
objLabel2.appendChild(objTextNode2);
objDiv.appendChild(objLabel);
objDiv.appendChild(objLabel2);
创建objDiv
,只需将其附加到td3
。
同样,也可以创建和附加以下标记字段和COE字段。
@neversaynever,你有没有试过什么,好好用这个
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Add / Remove Table Rows Dynamically</title>
<style type="text/css">
form{
margin: 20px 0;
}
form input, button{
padding: 5px;
}
table{
width: 100%;
margin-bottom: 20px;
border-collapse: collapse;
}
table, th, td{
border: 1px solid #cdcdcd;
}
table th, table td{
padding: 10px;
text-align: left;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".add-row").click(function(){
var fname = $("#fname").val();
var lname = $("#lname").val();
var email = $("#email").val();
var markup = "<tr><td><input type='checkbox' name='record'></td><td>" + fname + "</td><td>" + lname + "</td><td>" + email + "</td></tr>";
$("table tbody").append(markup);
});
// Find and remove selected table rows
$(".delete-row").click(function(){
$("table tbody").find('input[name="record"]').each(function(){
if($(this).is(":checked")){
$(this).parents("tr").remove();
}
});
});
});
</script>
</head>
<body>
<form>
<input type="text" id="fname" placeholder="First Name">
<input type="text" id="lname" placeholder="Last Name">
<input type="text" id="email" placeholder="Email Address">
<input type="button" class="add-row" value="Add Row">
</form>
<table>
<thead>
<tr>
<th>Select</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="record"></td>
<td>rst</td>
<td>xyz</td>
<td>xyz@gmail.com</td>
</tr>
</tbody>
</table>
<button type="button" class="delete-row">Delete Row</button>
</body>
</html>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.