1

[追加]をクリックしたときに、テーブル内の各フィールドにIDを動的に追加するにはどうすればよいですか？たとえば、常に表示される最初の行はcheckbox0、input0、select0であり、追加ボタンがクリックされたときの次の行のIDはcheckbox1、input1、select1などです。

以下は私のコードです：

  <HTML>
  <HEAD>
  <TITLE> Add/Remove dynamic rows in HTML table </TITLE>
  <SCRIPT language="javascript">
  function addRow(tableID) {
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);

    alert("rowCount " +rowCount);
    alert("row " +row);
    var colCount = table.rows[0].cells.length;
    for(var i=0; i<colCount; i++) {
      var newcell = row.insertCell(i);
      newcell.innerHTML = table.rows[0].cells[i].innerHTML;
      //alert(newcell.childNodes);
      switch(newcell.childNodes[0].type) {
        case "text":
          newcell.childNodes[0].value = "";
          break;
        case "checkbox":
          newcell.childNodes[0].checked = false;
          break;
        case "select-one":
          newcell.childNodes[0].selectedIndex = 0;
          break;
     }
   }
 }

  </SCRIPT>
 </HEAD>
 <BODY>
 <INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />

   <TABLE id="dataTable" width="350px" border="1">
  <TR>
 <TD><INPUT type="checkbox" name="chk"/></TD>
<TD><INPUT type="text" name="txt"/></TD>
<TD>
 <SELECT name="country">
 <OPTION value="in">India</OPTION>
 <OPTION value="de">Germany</OPTION>
 <OPTION value="fr">France</OPTION>
 <OPTION value="us">United States</OPTION>
<OPTION value="ch">Switzerland</OPTION>
 </SELECT>
</TD>
   </TR>
   </TABLE>
 </BODY>
</HTML>
4

3 に答える 3

4

これはトリックを行うことができます

 switch(newcell.childNodes[0].type) {
    case "text":
      newcell.childNodes[0].value = "";
      newcell.childNodes[0].id = "input" + rowCount;
      break;
    case "checkbox":
      newcell.childNodes[0].checked = false;
      newcell.childNodes[0].id = "checkbox" + rowCount;      
      break;
    case "select-one":
      newcell.childNodes[0].selectedIndex = 0;
      newcell.childNodes[0].id = "select" + rowCount;       
      break;
 }

jsFiddleデモ

編集

select@bfavarettoが指摘しているように、セルの先頭の空白を削除する必要があります

<TD><SELECT name="country">
    <OPTION value="in">India</OPTION>
    <OPTION value="de">Germany</OPTION>
    <OPTION value="fr">France</OPTION>
    <OPTION value="us">United States</OPTION>
    <OPTION value="ch">Switzerland</OPTION>
  </SELECT>
</TD>
于 2012-08-27T20:21:45.423 に答える
1

jQueryを使用できるとは言わなかったとしても、私はjQueryを使用したソリューションを投稿しています。見てください。

HTML：

<table>
    <tbody id="tableBody">
    </tbody>
</table>

JavaScript：

var $tableBody = $( "#tableBody" );

for ( var i = 0; i < 10; i++ ) {
    var $row = $( "<tr></tr>" );
    var $textInput = $( "<input type='text' id='text_" + i + "'/>" );
    var $checkbox = $( "<input type='checkbox' id='check_" + i + "'/><span> Checkbox " + i + "</span>" );
    $row.append( $( "<td></td>" ).append( $textInput ) );
    $row.append( $( "<td></td>" ).append( $checkbox ) );
    $tableBody.append( $row );
}

jsFiddle： http: //jsfiddle.net/davidbuzatto/C8CRW/

于 2012-08-27T20:28:14.497 に答える
0

これを試して：

    function setIds() {
        var id = 0;
        for (var i = 0; i < document.getElementsByTagName("input").length; i++) {
            if (document.getElementsByTagName("input")[i].type == "text") {
                document.getElementsByTagName("input")[i].id = "text_" + id;
                id++;
            }

        }
    }

そして、最初の関数の最後に追加します。

于 2012-08-27T20:26:07.840 に答える