7

私はjqueryにかなり慣れていません。次のコードがあります。ここで、追加ボタンをクリックしてテーブルに新しい行を取得したいのですが、取得できません。

誰かが私がここで犯した間違いを教えてもらえますか?

<script type="text/javascript">
var $ = jQuery.noConflict();
$("#addrows").click(function () {
  if (document.getElementById("hiddenprice").value == "") {
    imagecounter = 4;
   } else {
   imagecounter = parseFloat(document.getElementById("hiddenprice").value) +1;
   }
  //imagecounter=4;     
  var newImageDiv = $(document.createElement('div'))
   .attr("id", 'add_div' + imagecounter);
  newImageDiv.after().html('<table width="100%" cellpadding="0" 
  cellspacing="0" class="pdzn_tbl1" border="0">' +
  '<tr><td><input type="text" name="rollno<? $i ?>"/></td>' +
  '<td><input type="text" name="firstname<? $i ?>" /></td>' +
  '<td><input type="text" name="lastname<? $i ?>" /></td></tr></table>');

  newImageDiv.appendTo("#addgroup");
  $("tr:last").after(newImageDiv);
  document.getElementById("hiddenprice").value = imagecounter;
  imagecounter++;
});
</script>
<div class="common" style="width:1040px; -overflow-x:scroll; padding: 5px 5px 0 5px;">
  <table id="maintable" width="50%" cellpadding="0" cellspacing="0" class="pdzn_tbl1" border="#729111 1px solid" >
  <tr>  
    <th>Roll No</th>
    <th>First Name</th>
    <th>Last Name</th>
  </tr>
  <?php $t_row=3; for($i=1;$i<=$t_row;$i++) {   ?>
  <tr id="rows">
    <div> 
      <td><input type="text" name="rollno<? $i ?>"/></td>
      <td><input type="text" name="firstname<? $i ?>"/></td>
      <td> <input type="text" name="lastname<? $i ?>"/></td>
    </div>
  </tr>
  <? } ?>

  <div id="addgroup"> 
    <div id="add_div1"> </div>
  </div> 
  <table>
    <input type="button" name="add" value="+Add" id="addrows" />
    <input type="hidden" id="hiddenprice" name="hiddenprice" value="3"/> 
  </table>
</div>

コードのフォーマットと編集: コードの配置が更新され、不要なスタイル コードが削除されて読みやすくなりました

4

8 に答える 8

6

Add table row in jQuery をご覧ください

解決策を与える

$('#maintable tr:last').after('<tr><td>...</td><td>...</td><td>...</td><td>...</td></tr>');

hereで説明されているように、 よりも を使用したソリューションafterが優先されappendます。

ノート

  • jqueryDOM 要素へのアクセスと によるアプローチを混在させないでくださいgetElementById。
  • jQuery を使用しているため、独自の AJAX 関数を実行する必要はありません。

デモコード

http://jsfiddle.net/A5dT6/1/

于 2013-09-30T11:23:39.893 に答える
3

このようなものを試してみてください、フィドル

    $(function () {
        $("#addRows").click(function () {
            $("#maintable").append("<tr> <td> New Row</td> </tr>")
        });
    })
于 2013-09-30T12:33:50.973 に答える
2

行インデックスを更新するためのテーブル使用.after()メソッドと文字列にサンプルを追加する別のソリューションを提供します。interpolation

let rowIndex = 0;

$("#addrows").click(function () {

  $('#maintable tr:last').after(`<tr><td><input type="text" name="rollno${rowIndex++}"/></td>
      <td><input type="text" name="firstname${rowIndex++}"/></td>
      <td> <input type="text" name="lastname${rowIndex++}"/></td></tr>`);
});


let rowIndex = 0;
  
$("#addrows").click(function () {
  
  $('#maintable tr:last').after(`<tr><td><input type="text" name="rollno${rowIndex++}"/></td>
      <td><input type="text" name="firstname${rowIndex++}"/></td>
      <td> <input type="text" name="lastname${rowIndex++}"/></td></tr>`);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="common" style="width:1040px; -overflow-x:scroll; padding: 5px 5px 0 5px;">
  <table id="maintable" width="50%" cellpadding="0" cellspacing="0" class="pdzn_tbl1" border="#729111 1px solid" >
  <tr>  
    <th>Roll No</th>
    <th>First Name</th>
    <th>Last Name</th>
  </tr>
 
  <div id="addgroup"> 
    <div id="add_div1"> </div>
  </div> 
  <table>
    <input type="button" name="add" value="+Add" id="addrows" />
    <input type="hidden" id="hiddenprice" name="hiddenprice" value="3"/> 
  </table>
</div>

于 2019-05-12T14:26:46.660 に答える
1

以下のコードを試してください

 $("#addrows").click(function(){  $("#maintable").append("<tr> <td> Data Here</td> </tr>") });
于 2013-09-30T11:21:42.943 に答える
0

使用できます 

$('#maintable tr:last').after('<tr><td style="padding:5px;"> Add_Content_Here </td></tr>');
于 2013-09-30T11:20:48.443 に答える
0

このコードを試して、jqueryを使用してテーブルに新しい行を動的に追加してください。

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script>
   <script type="text/javascript" language="javascript">

   var indexValue = 0;
   function addRow(){
        var test ='<tr><td>a</td></tr>';
        $("#applyTable").append(test);
        }
      </script>
</head>
<div>
<table class="myTable" border="1px" align="center" style="width:100px;"  >
        <tbody id="applyTable"> 
        </tbody>
</table>
</div>
<div > 
<input type="button" value="Add" border="1px" onclick="addRow()" /><br/><br/>
</div>
<body>
</body>
</html>
于 2013-09-30T11:42:47.763 に答える
0

問題は、ファイルに jQuery コードを追加していないためだと思います。次の 2 つのスクリプト ブロックが表示されます。

<script src="resources/scripts/jquery.ui.effect.js"></script>
<script src="resources/scripts/jquery.ui.effect-explode.js"></script>

彼らは生のjQueryを持っていないようです。

次の行も追加してみてください。

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
于 2013-09-30T12:23:59.297 に答える