Question

<table border="1px" id="myTable" cols="3">
<tr onclick="function1(this)">
       <td id="td1" >Cell 1</td>
       <td id="td2" >Cell 2</td>
       <td id="td3" >Cell 3</td>
    </tr>
    <tr onclick="function1(this)">
       <td id="td1" >Cell 1</td>
       <td id="td2" >Cell 2</td>
       <td id="td3" >Cell 3</td>
    </tr>
    <tr onclick="function1(this)">
       <td id="td1" >Cell 1</td>
       <td id="td2" >Cell 2</td>
       <td id="td3" >Cell 3</td>
    </tr>
    <tr onclick="function1(this)">
       <td id="td1" >Cell 1</td>
       <td id="td2" >Cell 2</td>
       <td id="td3" >Cell 3</td>
    </tr>
</table>

<script language="JavaScript">
    function function1(elem) {
        alert("Cell Index :"+ elem.rowIndex);

    }
</script>

I want td value for a specific tr index using Javascript actually I am create a table which have a edit function at the end of tr when I click edit button the in specific tr's td convert to text box and edit the table.

Was it helpful?

Solution

Since you've posted this with a jQuery tag, here goes. Whilst your question isn't 100% clear you are wanting to do the code below and as demonstrated at jsfiddle should be enough to get you going. It is assumed you want to add a textarea to a cell when someone clicks on that row.

DEMO: http://jsfiddle.net/7x36X/

HTML:

<table border="1px" id="myTable" cols="3">
    <tr>
        <td id="td1">Cell 1</td>
        <td id="td2">Cell 2</td>
        <td id="td3">Cell 3</td>
    </tr>
    <tr>
        <td id="td1">Cell 1</td>
        <td id="td2">Cell 2</td>
        <td id="td3">Cell 3</td>
    </tr>
    <tr>
        <td id="td1">Cell 1</td>
        <td id="td2">Cell 2</td>
        <td id="td3">Cell 3</td>
    </tr>
    <tr>
        <td id="td1">Cell 1</td>
        <td id="td2">Cell 2</td>
        <td id="td3">Cell 3</td>
    </tr>
    <tr>
        <td id="td1">Cell 1</td>
        <td id="td2">Cell 2</td>
        <td id="td3">Cell 3</td>
    </tr>
</table>

JAVASCRIPT/jQuery:

$(document).ready(function () {
    //Listen to a click on a tr
    $('tr').on('click', function (event) {
        //check that we are clicking in a new row else do nothing
        if ($('.someInput', $(this)).length == 0) {
            // get the last td as our target for example
            var targetTD = $('td:last', $(this));
            //get previous content of the TD
            var previousContent = targetTD.text();
            // Now add in a textarea with a save button
            targetTD.html('<textarea class="someInput">' + previousContent + '</textarea><button class="saveButton">Save</button>');
            // Do whatever else you need to do here to make your changes persistent e.g. AJAX to server
        }
    });

    // We are adding what is called a delegated event listener for the save buttons which haven't been created yet.
    $('#myTable').on('click', '.saveButton', function (event) {
        // get the target TD
        var targetTD = $(this).parent();
        // get Textarea text
        var text = $(this).siblings('.someInput').val();
        // Set the targetTD html as the text
        targetTD.html(text);
    });
});

OTHER TIPS

You may try something like this to get all td in an array (Example):

JS:

$(function(){
    $("#myTable tr td.edit").on('click', function(e){
        var tr = $(this).closest('tr');
        var tds = $(tr).find("td:not('.edit')").get();
        console.log(tds); // Array of all td in the clicked tr

        // Put each td's text in a text box
        console.log($(tds[0]).text()); // First td text
        console.log($(tds[1]).text()); // Second td text
        console.log($(tds[2]).text()); // Third td text
    });
});

HTML:

<table border="1px" id="myTable">
    <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>
        <td class='edit'>Edit</td>
    </tr>
    <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>
        <td class='edit'>Edit</td>
    </tr>
</table>

Also an id must be unique, use class if needed in your tds. You have used id="td1" and other similar ids more than once in the same page.

Working Fiddle even id's are changed
Javascript

function function1(elem) {
    if (elem.getAttribute("isEditing") == null) {
        elem.setAttribute("isEditing","true");
        for (i = 0; i < elem.children.length; i++) {
            //Create an input type dynamically.
            var element = document.createElement("input");

            //Assign different attributes to the element.
            element.setAttribute("type", "text");
            element.setAttribute("value", elem.children[i].innerHTML);
            element.setAttribute("id", "inp-" + elem.children[i].getAttribute("id"));
            elem.children[i].innerHTML = "";
            elem.children[i].appendChild(element);
        }
    }
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top