gpt4 book ai didi

javascript - 在动态表中添加行时更改 ID/类或输入名称

转载 作者:行者123 更新时间:2023-11-29 18:54:21 24 4
gpt4 key购买 nike

目前我正在开发一个动态表,用户可以在其中添加和删除表中的行以输入数据...如何在添加行时更改用户的输入“名称/ID/类别”。任何帮助将不胜感激。谢谢。

<!DOCTYPE html>
<html>
<head>
<title>Dynamic table</title>

<script src="https://code.jquery.com/jquery-1.8.3.min.js" integrity="sha256-YcbK69I5IXQftf/mYD8WY0/KmEDCv1asggHpJk1trM8="
crossorigin="anonymous"></script>

<script>

$(document).ready( function() {

$('#butVal').click(function(){
var rowLen = $('tr.tabRow').length;

if(rowLen>9)
{
alert("no of row is reached 10");
}
else
{
$("tr.tabRow:first").clone(true).appendTo("#table-2>tbody");



$(".tabRow:last").children("td").children("input").each(function(index, element){
$(element).val("");
});



}
});


$(document).on("click", "button.remove", function(){

if($(this).parents("tr").siblings("tr.tabRow").length > 0)
{
$(this).closest("tr.tabRow").remove();
}
else
{
alert("you can.t remove this record");
}
});


$(document).on("click", ".add, .remove", function(){

$("td.sno").each(function(index,element){
$(element).text(index + 1);
});
});
});



</script>

</head>
<body>

<div class="total">
<table id="table-2" class="add" border ="1">
<thead>
<tr>
<th class="small">S.No</th>
<th class="sizing"> Description</th><th>Quantity</th>
<th> Price </th>
<th><button id="butVal"> + </button></th>
</tr>
</thead>

<tbody>
<tr class="tabRow" id="1item">
<td class="sno">1</td>
<td> <input class="desc" type="text" name="desc"/> </td>
<td> <input class="qty" type="text" name="qty"/> </td>
<td> <input class="price" type="text" name="price"/> </td>
<td><button class="remove">Remove</button></td>
</tr>
</tbody>

</table>
</div>

</body>
</html>

最佳答案

所以你尝试过使用“.addClass() Jquery function”或removeclass()函数?

这是 .addClass() 的示例:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">


<title>addClass demo</title>
<style>
p {
margin: 8px;
font-size: 16px;
}
.selected {
color: blue;
}
.highlight {
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<p>Hello</p>
<p>and</p>
<p>Goodbye</p>

<script>
$( "p" ).last().addClass( "selected" );
</script>

</body>
</html>

关于javascript - 在动态表中添加行时更改 ID/类或输入名称,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44219493/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com