代码之家 › 专栏 › 技术社区 › johny

所选插件无法处理表中动态创建的行

jquery-chosen jquery-plugins html jquery javascript

johny · 技术社区 · 10 年前

我必须说我是JQuery的初学者,但我通常尝试自己解决问题。然而,现在我有一个问题,我被卡住了我有一个表,其中包含动态添加的行和每个行的选择框,用于单次删除或多次删除,除添加行外,一切都正常。选择应用时,选择框不起作用,无论我做什么都不起作用。

HTML格式

<table id="dataTable">
<tr>
  <th><input type="checkbox" id="selectall" value="selectAll"/></th>
  <th>Field-1</th>
  <th>Field-2</th>
  <th>Field-3</th>
  <th>Field-4</th>
  <th>Field-5</th>
</tr>
  <tbody>
      <tr>
        <td><input type="checkbox"  class="check"></td>
        <td>
            <select name="input-1[]" class="chosen_select_L">
                <option></option>
                <option>Option 1</option>
                <option>Option 2</option>
                <option>Option 3</option>
            </select>
        </td>
        <td><input name="input-2[]" type="text" class="chosen_text"></td>
        <td><input name="input-3[]" type="text" class="chosen_text"></td>
        <td><input name="input-4[]" type="text" class="chosen_text"></td>
        <td>
            <select name="input-5[]" class="chosen_select_M">
                <option></option>
                <option>Option 1</option>
                <option>Option 2</option>
                <option>Option 3</option>
            </select>
        </td>
      </tr>
  </tbody>
</table>
<input type="button" value="Add Field" onClick="addRow('dataTable')" /> 
<input type="button" value="Remove Field" onClick="deleteRow('dataTable')"  />

JS文件

$(".chosen_select_L").chosen({
    disable_search_threshold: 10,
    no_results_text: "Oops, nothing found!"
  });
$(".chosen_select_M").chosen({
    disable_search_threshold: 10,
    no_results_text: "Oops, nothing found!"
  });

$(document).ready(function() {
    $('#selectall').click(function(event) {
        if(this.checked) { 
            $('.check').each(function() { 
                this.checked = true; 
            });
        }else{
            $('.check').each(function() { 
                this.checked = false; 
            });        
        }
    });
});

function addRow(dataTable) {
    var table = document.getElementById(dataTable);
    var rowCount = table.rows.length;
    if(rowCount < 11){
        var row = table.insertRow(rowCount);
        var colCount = table.rows[1].cells.length;
        for(var i=0; i<colCount; i++) {
            var newcell = row.insertCell(i);
            newcell.innerHTML = table.rows[1].cells[i].innerHTML;
        }
    }else{
         alert("Maximum fields is 10.");

    }
}

function deleteRow(dataTable) {
    var table = document.getElementById(dataTable);
    var rowCount = table.rows.length;
    for(var i=2; i<rowCount; i++) {
        var row = table.rows[i];
        var chkbox = row.cells[0].childNodes[0];
        if(null != chkbox && true == chkbox.checked) {
            if(rowCount <= 1) {
                alert("Cannot Remove all fields.");
                break;
            }
            table.deleteRow(i);
            rowCount--;
            i--;
        }
    }
}

我试着给出不同的id或类名,从视觉上看,一切都很好,但除了第一行不是动态创建的之外,没有一个选择框实际工作。

我创建了一个 jsfiddle 让你们结账。任何帮助都将不胜感激。谢谢