Jquery - 检查列复选框,然后对这些行执行某些操作

时间:2015-03-20 22:39:27

标签: javascript jquery html checkbox

我一直试图找到一个与我的问题很好的匹配,但没有什么是真正具体的。我还在学习,并且不知道我到底错过了什么。

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

这是我正在使用的简化版本。在最终版本中,我将csv文件上传到您在那里看到的html表(id =" dvCSV")。上传后,表格看起来就像显示的那样(添加了下拉列表和一列复选框)。复选框来自" pre-chcecked"当我生成它们但我想要的是用户能够转动"关闭"我不想计算的行。

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

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);
}

希望我能清楚地解决问题。任何帮助将不胜感激。

1 个答案:

答案 0 :(得分:0)

在生成表时将类传递给tr元素。然后为您的复选框创建一个on change方法。在此处阅读更多内容:http://api.jquery.com/on/

此外,如果您无法从表格中获取插入的行ID,那么请在您的js之外启动一个计数器

counter = 0;

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

SO ..

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

然后将此代码段添加到所有其他JS

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

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

});

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