从动态创建的行中检索id

时间:2012-12-04 22:19:44

标签: javascript jquery html ajax

我有一个显示数据库信息的页面。我需要用户能够单击“详细信息”链接以查看有关记录的更多信息,或单击输入框(“检查”列),然后提交,这将更新记录的状态。要实现这一点,我需要从“id”列获取id。

这就是页面的样子:

req page

这是创建它的代码:

  $.ajax({
type: "POST",
url: "lib/req.reqinfo.php",
async: false,
data: {},
success: function(response){
// alert(response);
    var responseArray = response.split(',');    
    for(var x=0;x<responseArray.length;x++){
        id = responseArray[x]; x++;
        dateadded = responseArray[x]; x++;
        needby = responseArray[x]; x++;
        addedby = responseArray[x]; x++;
        unit = responseArray[x]; x++;
        appr = responseArray[x];

        $("#dbinfo").append('<br /><div class="row"><div id="idrow'+x+'" class="onecol bg">'+id+'</div><div class="twocol bg">'+dateadded+'</div><div class="twocol bg">'+needby+'</div><div class="twocol bg">'+addedby+'</div><div class="twocol bg">'+unit+'</div><div class="onecol bg">'+appr+'</div><div class="onecol bg"><label id="detaillink" class="link"><a href="#">details</a></label></div><div class="onecol bg last">'+check+'</div></div>');
    }

我似乎无法找到指向特定div的解决方案来提取所需信息

HTML:

    <div class="container">
   <br />
<div id="dbinfo" class="row center">
<div class="onecol bg">ID</div>
<div class="twocol bg">Date Added</div>
<div class="twocol bg">Need By</div>
<div class="twocol bg">Added By</div>
<div class="twocol bg">Unit #</div>
<div class="onecol bg">Appr.</div>
<div class="onecol bg">Details</div>
<div class="onecol bg last">check</div>
<div class="onecol"> &nbsp </div>
</div>

   <br />
<div class="row">
    <label class="link"><a href="home.php">Home</a></label>
</div>

3 个答案:

答案 0 :(得分:2)

因为您自己生成“行”,所以可以直接添加内联ID。例如:

<div class="onecol bg"><label id="detaillink" class="link"><a href="#" data-id="'+x+'>details</a></label></div>

或:

<div class="onecol bg" data-id="'+x+'>Details</div>

顺便说一句,我个人的选择是在表格中显示这些表格数据,并将点击行为附加到行(tr)。

答案 1 :(得分:0)

你可以尝试这种方法..

将课程详情添加到此

<div class="onecol bg details">Details</div>

// Assuming the details cell has a class called details.
$('.details').on('click', function(){
    var $row = $(this).closest('div.row');

    var id = $row.find('div:eq(0)').attr('id');
    // This is the id you are looking for
});

.attr('id');  If that div has a id..

.html();     If you are looking for the text inside it

答案 2 :(得分:0)

在html中:

  • 链接不需要标签。
  • 链接需要一些类来更容易地选择进一步的事件处理

链接的事件处理程序:

$('link class').on('click', function(e) {
   e.preventDefault();
   $(this).parents('div').siblings('div:eq(0)').text();
});