Jquery - 检查列复选框然后对这些行做一些事情

Question

我一直在努力寻找与我的问题相匹配的内容，但没有任何具体的内容。我还在学习，不知道我到底错过了什么。

所以我的代码可以在这里找到：Fiddle

这是我正在使用的简化版本。在最终版本中，我会将 csv 文件上传到您在此处看到的 html 表 (id="dvCSV")。上传后，表格看起来就像显示的一样（添加了下拉列表和一列复选框）。当我生成复选框时，它们会“预先检查”，但我想要的是用户能够“关闭”我不想计算的行。

我将引导您完成整个过程： 该函数读取用户指定的列。我不知道他们会将数据上传到哪一列。

function CheckLocations() {
//Checks the uploaded data for the locations of the Lat/Lon Data based on user dropdowns
colLocs[0] = ($('#Value_0 :selected').text());
colLocs[1] = ($('#Value_1 :selected').text());
colLocs[2] = ($('#Value_2 :selected').text());
colLocs[3] = ($('#Value_3 :selected').text());
LatColumn = colLocs.indexOf("Lat");
LongColumn = colLocs.indexOf("Long");
}

function AllTheSame(array) { //if they do not designate the checkboxes, I prompt them to
var first = array[0];
return array.every(function (element) {
    return element === first;
});
}

此函数将指定列中的所有数据放入数组中进行计算。

function data2Array() {
//gets the lat and long data from the assigned columns and transfers them to an array for calculation

$("#dvCSV tr td:nth-child(" + (LatColumn + 1) + ")").each(function () {
    var tdNode = $("<td/>");
    tdNode.html(this.innerHTML);
    LatData.push(tdNode.text());
});
LatData.splice(0, 2);
LatData.unshift(1, 1);

$("#dvCSV tr td:nth-child(" + (LongColumn + 1) + ")").each(function () {
    var tdNode = $("<td/>");
    tdNode.html(this.innerHTML);
    LongData.push(tdNode.text());
});
LongData.splice(0, 2); //these two lines remove the first two items then replace them with 0
LongData.unshift(1, 1);
}

这些函数中的第一个在计算完成后删除复选框列，然后在末尾附加新的计算列。第二个是我尝试将复选框读入数组。理想情况下，我想要一组值 true 或 false，然后进行计算并将计算的值返回到 dvCSV 表。对于未执行计算的 td，单元格将为空。

function removeChecks() {
$("#dvCSV th:last-child, #dvCSV td:last-child").remove();
}

function makeCheckArray() {
var searchIDs = $("#dvCSV tbody td:last()     input:checkbox:checked").map(function () {
    return $(this).val();
}).get();
alert(searchIDs);
}

希望我把问题说清楚了。任何帮助将不胜感激。

Answer 1

当您的表格生成到 tr 元素中时，传递一个类。然后为您的复选框创建一个更改方法。在这里阅读更多：http://api.jquery.com/on/

此外，如果您无法从表中获取插入的行 id，则像这样在您的 js 之外启动一个计数器

计数器 = 0;

然后在循环内添加计数器++

所以..

<tr class="row-1">
<td>
</td>
</tr>

然后将这个 sn-p 添加到所有其他 JS 之外

$( "tr" ).on( "change",  function() {

//do something
$(this+'.row-'+(counter)).hide();

});

这应该会让你朝着正确的方向前进。