简体   繁体   中英

How to find a value in a table, and then grab data in adjacent cells

I have a page that allows users to add rows to a table 1) adding text into 3 input fields, and then 2) clicking on a button.

Before I add a row to the table, I want to make sure that they do not already have an identical record....

Here's the code I have right now to just add a record:

    $("#add_to_table").click(function()   {

            var contact_type=$("#contact_types option:selected").val();
            var call_order = $('#call_order').val();
            var contact_details = $('#contact_details').val();

            // add new logic here

            var rules_count = $('#rule_summary tbody tr').length - 1;  //minus one for the
            rules_count = rules_count + 1;

            var htmlstring = '<tr id="rule_' + rules_count + '">'
            htmlstring = htmlstring + '<td><input type="button" value="Remove" class="removeruleset"/></td>'
            htmlstring = htmlstring + '<td>' + contact_type + '</td>'
            htmlstring = htmlstring + '<td id=' + contact_details + '-' + rules_count + '>' + contact_details + '</td>'
            htmlstring = htmlstring + '<td>' + call_order + '</td>'
            htmlstring = htmlstring + '</tr>'
            htmlstring = htmlstring + '<tr><input type="hidden" name="contact_type"' + rules_count + ' value=' + contact_type  + '/></tr>'
            htmlstring = htmlstring + '<tr><input type="hidden" name="contact_details"' + rules_count + ' value=' + contact_details + '/></tr>'
            htmlstring = htmlstring + '<tr><input type="hidden" name="contact_details"' + rules_count + ' value=' + call_order + '/></tr>'
            $('#rule_summary tr:last').after(htmlstring);
    });

This code is working, although I'm sure there are ways to improve it. I'm still pretty green with jQuery and Javascript.

Here's what I have come up with so far to change the code: (I'll be inserting this where I have the comment "add new logic here".

var cell;
var result = $('#rule_summary tr').find('td:contains('+contact_details+')');

result.siblings().css('background-color', 'red');

I basically need to check to see if the first cell in the row and the last cell also match the values I've grabbed from the input fields. I've confirmed that the code is finding the right cell by color coding the adjacent cells. I just need to know how to extract the values for each sibling... one at a time.

EDIT 1

I've also tried to add a class to the fields in the table and select the siblings by class name:

var cell;
var result = $('#rule_summary tr').find('td:contains('+contact_details+')');
result.siblings().css('background-color', 'red');

alert(result.siblings('td.call_order').val());

But the alert is coming back with nothing.

Is this what you want?

If $('#rule_summary tr > td:contains('+contact_details+')').length {
    //theres a duplicate entry
}
else {
    //add new entry
}

EDIT 1 To get the text inside each:

result.siblings().each(function(){
    alert(this.html());
});

EDIT 2

To get specific one:

result.siblings(".yourId").html();

Here's the solution I've come up with:

            var result = $('#rule_summary tr').find('td:contains('+contact_details+')'); //find cell in table with same contact_details information... 

                if (result.length > 0 ) {
                    if (result.siblings("#call_order").html() == call_order && result.siblings("#contact_type").html() == contact_type){
                        alert("Duplicate!");
                        return false;
                    }
                }

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM