1

私はこのJSとHTMLコードを持っています:

追加ボタンをクリックすると、以下の関数が実行されて HTML テーブルに別の行が追加され、毎回 1 カウントアップした後に数値を含むフォーム フィールドが追加されます。

<script language="javascript" type="text/javascript">
var i=2;
function addRow()
{
          var tbl = document.getElementById('table1');
          var lastRow = tbl.rows.length;
          var iteration = lastRow - 1;
          var row = tbl.insertRow(lastRow);

          var productcodeCell = row.insertCell(0);
          var elproductcode = document.createElement('input');
          elproductcode.type = 'text';
          elproductcode.name = 'productcode' + i;
          elproductcode.id = 'productcode' + i;
          elproductcode.size = 20;
          productcodeCell.appendChild(elproductcode);

          var producttitleCell = row.insertCell(1);
          var elproducttitle = document.createElement('input');
          elproducttitle.type = 'text';
          elproducttitle.name = 'producttitle' + i;
          elproducttitle.id = 'producttitle' + i;
          elproducttitle.size = 30;
          producttitleCell.appendChild(elproducttitle);

          var quantityCell = row.insertCell(2);
          var elQuantity = document.createElement('input');
          elQuantity.type = 'text';
          elQuantity.name = 'quantity' + i;
          elQuantity.id = 'quantity' + i;
          elQuantity.size = 10;
          quantityCell.appendChild(elQuantity);

          i++;
          form1.number.value=i;
          //alert(i);

}
</script>

<form method="post" action="create_quote2.php" name="form1">
<input type="button" value="Add New Line" onclick="addRow();" />
<table width="800" border="0" cellspacing="5" cellpadding="5" id="table1">
  <tr>
    <td><strong>Product Code</strong></td>
    <td><strong>Title</strong></td>
    <td><strong>Add</strong></td>
    <td><strong>Qty</strong></td>
  </tr>
  <tr>
    <td><input type="text" name="productcode1" id="productcode1" size="20" /></td>
    <td><input type="text" name="producttitle1" id="producttitle1" size="30" /></td>
    <td><a href="page.php?c=1">Link here</a></td>
    <td><input type="text" name="quantity1" id="quantity1" size="10" /></td>
  </tr>
  </table>
    <input type="hidden" name="number" id="number" value="1" />
    </form>

行が追加されたときに 3 列目にリンクを追加するにはどうすればよいですか? また、他のフィールドと同様に URL の終了番号 + 1 を毎回変更します。

4

1 に答える 1

3

i を連結した静的リンク文字列を含む変数を設定してみてください。スクリプトの残りの部分を考えると、必要な場所に変数を追加することはおなじみのはずです。

var i=2;
function addRow()
{
    var link='/directoryname/filename'+i+'.html';

新しいリンク セルは、次のように作成して追加できます。

var linkCell = row.insertCell(2);
var elLink = document.createElement('a');
var href='/directoryname/filename'+i+'.html';
elLink.href = href;
elLink.innerHTML = 'link'+i;
linkCell.appendChild(elLink);

調べるために jsfiddle を追加しました: http://jsfiddle.net/KKKZ8/

于 2013-11-04T22:51:50.113 に答える