Question

我遇到了问题。我需要在表格中添加行，并使用javascript或jquery给出编号的类，如name_4，name_5等。

    <body>
        <form action="" method="post">
        <button>Добавить</button>
        <input type="submit" value="Подтвердить">
        <table>
            <tr>
                <td class='name_1'>ФИО</td>
                <td class='subj1_1'>1-ый предмет</td>
                <td class='subj2_1'>2-ой предмет</td>
                <td class='subj3_1'>3-ий предмет</td>
            </tr>
            <tr>
                <td class='name_2'>text</td>
                <td class='subj1_2'>text</td>
                <td class='subj2_2'>text</td>
                <td class='subj3_2'>text</td>
            </tr> 
        </table>
        </form>
        <script>
        $(document).ready(function() {
            $("button").click(function(){
                var line = "<tr><td class='name'>Text</td><td class='subj1'></td><td class='subj2'></td><td class='subj3'></td></tr>"
                $("table").append(line)
                $("tr:last").hide()
                $("tr:last").fadeToggle(1000)
            });
        });
</script>

Answer 1

使用tr获取$("#tableId tr).length的长度，并为其添加1

＆＃13;

$(document).ready(function() {
  $("button").click(function(e) {
    e.preventDefault();
    let getTRLength = $("#myTable tr").length + 1;
    var line = "<tr><td class='name_" + getTRLength + "'>Text</td><td class='subj1'></td><td class='subj2'></td><td class='subj3'></td></tr>"
    $("table").append(line)
    $("tr:last").hide()
    $("tr:last").fadeToggle(1000)
  });
});

＆＃13;

.name_3 {
  color: green;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post">
  <button>Добавить</button>
  <input type="submit" value="Подтвердить">
  <table id="myTable">
    <tr>
      <td class='name_1'>ФИО</td>
      <td class='subj1_1'>1-ый предмет</td>
      <td class='subj2_1'>2-ой предмет</td>
      <td class='subj3_1'>3-ий предмет</td>
    </tr>
    <tr>
      <td class='name_2'>text</td>
      <td class='subj1_2'>text</td>
      <td class='subj2_2'>text</td>
      <td class='subj3_2'>text</td>
    </tr>
  </table>
</form>

＆＃13;

Answer 2

您的代码无法正常工作，因为您没有指定button type attribute。始终为type元素指定<button>属性。不同的浏览器对<button>元素使用不同的默认类型。

如果您在HTML表单中使用<button>元素，则不同的浏览器可能会提交不同的值。使用<input>以HTML格式创建按钮。

如果您的按钮不是要向服务器提交表单数据，请务必将type attribute设置为按钮。否则，他们将尝试submit形成数据并加载不存在的响应，可能会破坏文档的当前状态。

＆＃13;

$( document ).ready( function() {
	$( 'button' ).click( function() {
		var line = "<tr><td class='name'>Text</td><td class='subj1'></td><td class='subj2'></td><td class='subj3'></td></tr>";
		$( 'table' ).append( line );
		$( 'tr:last' ).hide().fadeToggle( 1000 )
	} );
} );

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post">
	<button type="button">Добавить</button>
	<input type="submit" value="Подтвердить">
	<table>
		<tr>
			<td class='name_1'>ФИО</td>
			<td class='subj1_1'>1-ый предмет</td>
			<td class='subj2_1'>2-ой предмет</td>
			<td class='subj3_1'>3-ий предмет</td>
		</tr>
		<tr>
			<td class='name_2'>text</td>
			<td class='subj1_2'>text</td>
			<td class='subj2_2'>text</td>
			<td class='subj3_2'>text</td>
		</tr> 
	</table>
</form>

＆＃13;

使用jquery

2 个答案: