Question

我目前正在使用以下javascript函数代码来动态复制表行：

  <script language="javascript">     
     function addRow(tableID) {

        var table = document.getElementById(tableID);

        var rowCount = table.rows.length;
        var row = table.insertRow(rowCount);

        var colCount = table.rows[0].cells.length;

        var document.getElementById("selectlist").value

        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>

我想增加动态增加一个锚元素的id值，以便jquery函数可以工作，尽管有重复的类名。 HTML代码是：

   <table width="300">
                <thead>
                    <tr>
                        <th>&nbsp; </th>
                        <th width="190"> License Plate</th>
                        <th> Amount </th>
                        <th>&nbsp; </th>
                    </tr>
                </thead>
                <tbody id="dynamic_row_8">
                    <tr>
                        <td width="20"><input type="checkbox" name="add_or_remove_row"/></td>
                        <td width="144"><input type="text" name="garage_for[]" class="field"/></td>
                        <td width="144"><input type="text" name="garage_amount[]"class="field_medium"/ class="disabled_field" disabled></td>
                        <td><a class="modal_trigger" href="#modal"><img src="images/icons/add.png"></a></td>

                    </tr>
                </tbody>
                    <tr>
                        <td colspan="3"><div align="right">
                            <input type="button" value="Add Row" onClick="addRow('dynamic_row_8')" />
                            <input type="button" value="Delete Row" onClick="deleteRow('dynamic_row_8')" />
                            </div>
                        </td>
                    </tr>
            </table>

我希望能够将每个重复行的锚元素id递增1。

由于

Answer 1

jQuery对锚标记上的重复类名没有任何问题。比方说，您想要监听锚标记上的点击事件，并且您想知道点击了哪个锚标记，您只需要做的就是：

$('#dynamic_row_8').on('click', 'a', function (e) {
  // $(this) is the target element which fired the event handler.
  console.log($(this));
  e.preventDefault();
}

但是如果您仍想为每个动态创建锚添加个人ID，您可以执行以下操作。

在 addRow 功能中，您有一个开关来检查每个单元格中输入元素的输入类型，因为锚点不是输入，您可以使用< em> default case，通过添加 rowCount 来增加锚点的ID。在switch语句结束时，请执行以下操作：

switch(newcell.childNodes[0].type) {
  //...
  default:
    newcell.childNodes[0].setAttribute('id', rowCount += 1);
}

在您的开关中，您正在检查“选择一个”，

case "select-one":
  newcell.childNodes[0].selectedIndex = 0;
  break;

这永远不会成立，因为“ select-one ”不是输入类型。

您的功能也有错误。

var document.getElementById("selectlist").value // not a valid assingment!!!

猜猜你忘了给变量命名。

增加动态创建的行中锚元素的id值

1 个答案: